Theme
Dialog
A modal dialog, opened from a button in a DialogTrigger.
Examples
Props
Dialog
A modal dialog. Put it in a DialogTrigger after the button that opens it. Focus moves in and stays inside; Escape or a button with slot="close" closes it and focus returns.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The dialog's title: its accessible name, and what the reader sees first. |
children | ReactNode | — | |
role? | "dialog" | "alertdialog" | "dialog" | alertdialog for a confirmation that interrupts; it cannot be dismissed by clicking outside. |
DialogActions
A dialog's buttons, at its end above a rule, the main action last.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — |
Keyboard
| Key | Does |
|---|---|
| Tab or Shift+Tab | Cycle through the dialog's controls; focus cannot leave it |
| Escape | Closes it and returns focus to the button that opened it |
Accessibility
- The title is the dialog's accessible name. Everything outside is inert while it is open.
- role alertdialog for a confirmation: it cannot be dismissed by clicking outside.
- Rendered in a portal at the end of the document, so it is not clipped by an overflow ancestor.
- Entering and leaving animations use motion tokens, which are zero under prefers-reduced-motion.