Dialog

A modal window for a focused task — editing a record, previewing a document, a short form. It traps focus, returns it to the trigger on close, and can be dismissed by overlay click, Esc or the × button.

Choosing the right surface

The difference is dismissal. Dialog closes on overlay click, Esc and the × button; AlertDialog only through an explicit choice.

Surface	Use
`Dialog`	Focused tasks: edit a record, preview a document, small forms.
`AlertDialog`	Confirmations of destructive/irreversible actions: reject, delete, submit-and-lock.
`Sheet`	Side panel when the user still needs the page context — filters, secondary detail.

Focused task

Structure

Property	Value
Surface	`--card`, `--radius-xl` (12px), `--shadow-16`
Overlay	black at 60%
Width	max 512px
Title	18px / Inter 600
Motion	200ms fade + 95% zoom, ease-out

Best practices

Keep modal content to one job; long forms deserve a page or a Sheet.
Return focus to the trigger on close (Radix does this for you).
Give every dialog a DialogTitle — it is what screen readers announce.
Reach for AlertDialog the moment the action is irreversible.

Don't

Open a modal from a modal — flatten the flow instead.
Use a Dialog for confirmations — it can be dismissed by clicking outside.
Bury the primary action among several equal buttons.
Use modals for content users may want to compare with the page behind.

Accessibility & keyboard

Focus is trapped inside while open and returned to the trigger on close.
Title and description are announced (aria-labelledby / aria-describedby).
Keyboard: Esc closes; Tab cycles within the dialog.

Every Dialog part and prop in Storybook