Basic dialog
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader><DialogTitle>...</DialogTitle></DialogHeader>
...
<DialogFooter>...</DialogFooter>
</DialogContent>
</Dialog>Destructive confirmation
<Button variant="destructive">Delete tenant</Button>Accessibility
How Dialog works with assistive tech
- Role
- dialog
- Keyboard
- Escape (close)
- Tab (trapped inside)
- Shift+Tab (reverse)
- ARIA attributes
- aria-modal=true
- aria-labelledby
- aria-describedby
- Focus behavior
- trap-and-restore
Focus traps inside while open; returns to trigger on close. Background scroll locked. Esc always closes unless disabled.