Modal
Usage
A focused dialog over the page, for a decision or short task that must finish before anything else. Built on the native `<dialog>` element and opened with `showModal()`, so focus trapping, Escape to close, inertness of the background and the top-layer stacking all come from the platform rather than from a scroll-lock hack.import { Modal } from '@summonware/ui';Best practices
DoName the action in the confirm button — "Delete project", not "OK". It is often the last thing read before committing.
DoPut the cancelling action on the left and the committing one on the right, and make destructive commits `danger`.
Don'tOpen a modal from a modal. Nested dialogs strand the user with no clear way back.
Don'tUse a modal for information that could sit on the page. Interruption should buy something.
Anatomy
TitleHeader row. Omit for a bare dialog.
Body *The content, passed as children.
FooterAction row, right-aligned. Usually cancel plus one commit.
Examples
Common configurations, variations and states.Destructive confirmation
The most common shape: a short question, a cancel, and a danger commit. The footer reads left-to-right from least to most consequential.
Short form
A dialog can hold a small form, but only a short one — if it needs scrolling it wants to be a page.
Reference variants
3 of 16 labels from the reference are demonstrated above.Demo ModalVarying Modal ContentOptional SizesFadeSlideFallFlipRotateAdvanceOtherScrolling Long ContentVertically CenteredTooltips ModalUsing the GridToggle between modalsFull screen modal