05Shipped

Dialog

Modal overlay for confirmations and detail views. Radix-powered.

Import

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@charply/design"

Confirmation dialog

docs/design/components/dialog.md

✓Always include `DialogTitle` — it is required for screen reader accessibility.
✓Use `DialogTrigger asChild` to avoid a wrapping `<button>` around your custom trigger.
✓Put the cancel action first (left) and the primary/destructive action last (right) in `DialogFooter`.

Don't

✗Open dialogs programmatically without a user gesture.
✗Nest dialogs (use a multi-step flow instead).
✗Use a dialog for simple confirmations that a toast or inline message could handle.
✗---

See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.