Components · Messages
Modal
A dialog for a decision that must be made now.
Try itChange the motion setting at the top to feel each personality.
Use it
<Modal open={open} onClose={close} title="Leave this lesson?">
<Button onClick={close}>Keep going</Button>
</Modal>How it moves
| When | Role | What moves |
|---|---|---|
| Opens | enter | The panel fades in and rises by the enter distance, growing from the enter scale. The backdrop fades in |
| Closes | exit | The panel fades out and drops by the exit distance. The backdrop fades out |
Rules:
- The backdrop only fades. It never slides or scales.
- Closing is quicker than opening, because the exit role is quicker than the enter role.
- The modal stays in the page until its exit has finished, then it is removed.
- Nothing inside the modal animates as it opens. The panel arrives as one piece.
- A modal is for a decision that must be made now. For anything else use a toast or put it in the page.
Reduced motion: the enter and exit distances are 0, so the panel and backdrop fade in and out where they stand.
Keyboard and focus: this is the browser's own modal dialog, so focus stays inside it, the page behind cannot be used, and Escape closes it.
CSS variables used: --ss-motion-enter-distance, --ss-motion-enter-duration, --ss-motion-enter-easing, --ss-motion-enter-spring, --ss-motion-enter-spring-duration, --ss-motion-exit-distance, --ss-motion-exit-duration, --ss-motion-exit-easing.