Skip to content
Teasim
TeaCSS documentation
StyleSheet

Modal

A dialog surface with header, body, footer, and optional motion.

A dialog surface with header, body, footer, and optional motion. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

  • modal, modal-header, modal-title, modal-body, modal-footer, modal--motion, modal--backdrop-motion

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html
<dialog class="modal" aria-labelledby="confirm-title">
  <header class="modal-header"><h2 id="confirm-title" class="modal-title">Delete project?</h2></header>
  <div class="modal-body">This action cannot be undone.</div>
  <footer class="modal-footer bg-color:neutral-100">
    <button class="btn" type="button">Cancel</button>
    <button class="btn" type="button">Delete</button>
  </footer>
</dialog>

Variants and composition

modal-header/title/body/footer compose the dialog. modal–motion and modal–backdrop-motion are opt-in visual transitions, not focus or inertness behavior.

The modal uses p:4, then p:8@sm. Its sticky footer’s block-end inset, negative margin, and padding track those values. If you override modal padding, update all matching footer geometry at the same breakpoints. Supply a footer background to keep scrolled content from showing through; long actions must wrap inside the available width.

Behavior and accessibility

Use a native dialog where possible. Opening, focus placement, Escape, cancellation, submission, and returning focus remain application responsibilities; visual motion cannot make closed content inert.

Use showModal() for a modal native dialog and wire the actions to its real open/close state. [hidden] stops motion immediately; removing hidden does not open a dialog. Test reduced motion, zoom, long content, and focus visibility while the body scrolls behind the footer.

Reference

See the interactive Storybook specimen. Continue to Navbar or return to the Official preset overview.