Component docs
Modal
Native <dialog> that traps focus, restores it on close and dims the page.
When to use
- Use for short, focused tasks that need a decision before continuing.
- Always give a `title`; add `description` when the consequence needs explaining.
- Put the primary action last in `footer`; keep Cancel available.
Playground
Change props on the right; the preview and code update instantly.
<Modal open title="Delete project?" description="This removes all deployments. It can't be undone." size="md" dismissable />Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controls visibility. |
onClose | () => void | — | Called on Escape, backdrop click or close button. |
title | string | — | Heading; labels the dialog. |
description | string | — | Supporting text; describes the dialog. |
size | sm | md | lg | md | Max width. |
footer | ReactNode | — | Action row. |
hideCloseButton | boolean | false | Hides the × button (keep another way out). |
dismissable | boolean | true | Allow Escape / backdrop to close. |
children | ReactNode | — | Body content. |
Keyboard navigation
| Keys | Behavior |
|---|---|
| Tab / Shift+Tab | Cycle focus inside the dialog only. |
| Escape | Close (when dismissable). |
| Enter / Space | Activate the focused button. |
| On close | Focus returns to the element that opened it. |
ARIA attributes
| Attribute | Guidance |
|---|---|
aria-labelledby | Set automatically to the title. |
aria-describedby | Set automatically to the description when present. |
aria-modal | Implied by showModal(); content behind is inert. |
aria-label (close) | The × button is labelled “Close dialog”. |
Theme tokens
Every part of Modal reads from these tokens, so it re-themes in light and dark automatically.
| Part | Tokens |
|---|---|
| Panel | --surface-raised--border--radius-xl--shadow-lg--border-width |
| Backdrop | --overlay |
| Title | --font-display--text-h6--weight-semibold--tracking-tight |
| Description & body | --muted-foreground--foreground--text-sm--text-body |
| Footer | --surface--border--space-3--space-4--space-6 |
| Close button | --muted--muted-foreground--radius-sm--space-8--target-min |
Accessibility checklist
0 of 6 verified
Check contrast numbers live on the Accessibility page.