Components
Dialog
Modal dialog with focus trap and backdrop overlay.
Import
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button } from '@dmm1/daemon-ui'Usage
<Dialog>
<DialogTrigger asChild>
<Button>OPEN DIALOG</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>CONFIRM ACTION</DialogTitle>
<DialogDescription>
This action cannot be undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline">CANCEL</Button>
<Button>CONFIRM</Button>
</DialogFooter>
</DialogContent>
</Dialog>Features
- Focus trap within dialog when open
- Escape key to close
- Click outside to dismiss
- Animated entry/exit with Motion
- Portal rendering to avoid z-index issues
API Reference
| Component | Props | Description |
|---|---|---|
Dialog | open, onOpenChange | Root controlled/uncontrolled state |
DialogTrigger | asChild | Element that opens the dialog |
DialogContent | className | The modal content container |
DialogHeader | — | Header wrapper |
DialogTitle | — | Dialog heading |
DialogDescription | — | Dialog description text |
DialogFooter | — | Footer wrapper for actions |