Overlays — Woodruff Sawyer Design System

Modals demand a user decision before they can continue. Use them sparingly — only for destructive actions (delete, cancel), or confirmation of non-reversible operations. Click the button below to open a working modal.

<button data-modal-open="myModal">Trigger</button>

<div class="ws-modal-overlay" id="myModal">
  <div class="ws-modal" role="dialog" aria-modal="true" aria-labelledby="myModalTitle">
    <div class="ws-modal__header">
      <h3 class="ws-modal__title" id="myModalTitle">Confirm action</h3>
      <button class="ws-modal__close" data-modal-close aria-label="Close"></button>
    </div>
    <div class="ws-modal__body">Body content here.</div>
    <div class="ws-modal__footer">
      <button class="ws-btn ws-btn--secondary" data-modal-close>Cancel</button>
      <button class="ws-btn ws-btn--danger" data-modal-close>Confirm</button>
    </div>
  </div>
</div>

Property	Value
Max width — standard	440px
Max width — form modal	480–560px
Shadow	`--shadow-400`
Backdrop	`rgba(5, 10, 30, 0.44)`
Border radius	`--radius-lg` (12px)

Banners

Inline banners communicate persistent system status — active warnings, success confirmations, or informational context relevant to the current page. Unlike toasts, banners stay visible until the user acts or the condition resolves. Use the page-level variant for critical system-wide notifications.

Inline banners

<div class="ws-banner ws-banner--warning">
  <svg>...icon</svg>
  <div class="ws-banner__body">
    <span class="ws-banner__title">Missing loss run</span>
    Underwriting needs 3 years of loss history.
  </div>
  <button class="ws-banner__close" aria-label="Dismiss">×</button>
</div>

Page-level banner

Add .ws-banner--page for system-wide announcements (maintenance windows, critical outages). Place it directly below the topbar. No border-radius, no left/right borders — it spans full width.

Tooltips reveal supplementary information on hover or focus — field definitions, icon labels, truncated content. They are never the sole container for required information. Hover or focus any trigger below to see the tooltip appear.

Four placement positions

Default

--bottom

--left

--right

<!-- Top (default) -->
<span class="ws-tooltip-wrap" tabindex="0">
  <button>Trigger</button>
  <span class="ws-tooltip" role="tooltip">Tooltip text</span>
</span>

<!-- Bottom -->
<span class="ws-tooltip-wrap ws-tooltip-wrap--bottom" tabindex="0">...</span>

<!-- Left -->
<span class="ws-tooltip-wrap ws-tooltip-wrap--left" tabindex="0">...</span>

<!-- Right -->
<span class="ws-tooltip-wrap ws-tooltip-wrap--right" tabindex="0">...</span>

Common tooltip patterns

Icon label

Truncated cell

Term definition

Tooltips are supplementary, never essential.

Any content in a tooltip must also be discoverable another way (label, help text, accessible description). Touch users and some keyboard users may not see tooltips — never put required information in one.

Modifier	Position	When to use
(none)	Above trigger	Default — use when there is space above
`.ws-tooltip-wrap--bottom`	Below trigger	When trigger is near the top of the viewport
`.ws-tooltip-wrap--left`	Left of trigger	When trigger is at the right edge
`.ws-tooltip-wrap--right`	Right of trigger	When trigger is at the left edge

Usage guidance

Do

Use modals only for destructive or non-reversible actions that need explicit confirmation.
Trap focus inside an open modal — Escape key should close it.
Use inline banners for page-level status that isn't urgent enough for a modal.
Include a dismiss button (×) on banners unless the condition must be resolved first.
Add role="tooltip" and link via aria-describedby for screen reader users.

Don't

Don't open a modal on page load — it breaks orientation for users who just arrived.
Don't put form-heavy interactions in a modal — use a right panel instead.
Don't stack banners beyond 2 at a time — consolidate into a summary.
Don't put critical or required information only in a tooltip.
Don't trigger a tooltip on focus alone for long-press users — always support hover too.

Overlays, banners & tooltips