Dialog
stableclientradix dialog
A modal decision. Overlays are the one place a shadow exists in this system — a surface that genuinely leaves the page earns it; a card does not. The scrim is a flat tint of ink, never a blur.
Destructive confirmation
Primary action last, matching platform convention.
<Dialog
trigger={<Button variant="danger">Delete board</Button>}
title="Delete Mira's Buzz?"
description="All 47 pins go with it."
footer={
<>
<DialogClose asChild><Button variant="ghost">Keep it</Button></DialogClose>
<DialogClose asChild><Button variant="danger">Delete board</Button></DialogClose>
</>
}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger* | ReactNode | — | What opens it. Cloned with the trigger props. |
| title* | ReactNode | — | Names the dialog. Phrase it as the question being asked. |
| description | ReactNode | — | Strongly recommended — it's what aria-describedby points at. |
| footer | ReactNode | — | Action buttons. Primary last. |
Guidance
Do
- Name the consequence in the title: 'Delete board?' beats 'Are you sure?'.
- Label the confirm button with the verb, not 'OK'.
Don't
- Don't open a dialog from a dialog.
Accessibility
Focus is trapped inside while open and returns to the trigger on close — Radix handles both.
Escape closes. Clicking the scrim closes.
Body scroll is locked, so the page behind doesn't drift while a decision is pending.