Dialog
Displays focused content or actions in an overlay above the main interface. Ideal for confirmations, forms, and alerts.
Code
Installation
npx shadcn@latest add dialog npx shadcn@latest add alert-dialogBasic Example
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
</DialogHeader>
<p>Dialog content goes here</p>
</DialogContent>
</Dialog>Alert Dialog
import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive">Delete</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state |
| onOpenChange | function | — | Callback when open state changes |
| defaultOpen | boolean | false | Default open state (uncontrolled) |
Alert Dialog
Usage Guidelines
When to Use
Use Dialog for general content, forms, settings, and information that requires user attention but doesn't need immediate action. Use AlertDialog for destructive actions that require confirmation.
Dialogs should be used sparingly and only when you need to interrupt the user's workflow. Consider alternatives like inline forms or slide-over panels for less critical interactions.
Best Practices
- Keep dialog content focused and concise
- Always provide a clear way to close the dialog
- Use AlertDialog for destructive actions requiring confirmation
- Ensure dialogs are keyboard accessible (ESC to close)
- Use DialogFooter for action buttons with clear labels
Accessibility
Dialogs automatically trap focus and restore it when closed. Always include a DialogTitle for screen reader context. The close button is automatically included and accessible via keyboard.
Ensure dialog content is readable and has sufficient contrast. For AlertDialog, provide clear action labels that describe what will happen when the user confirms.