Basic
Sizes
Use Case: Password Reset
Sub-components
| Component | Description |
|---|---|
| Dialog | Root provider (controls open/close state) |
| Dialog.Trigger | Element that opens the dialog |
| Dialog.Content | The modal panel (accepts size, overlay props) |
| Dialog.Header | Top bar with close button |
| Dialog.Body | Scrollable content area |
| Dialog.Description | Accessible description text |
| Dialog.Footer | Bottom bar for actions |
Content Props
| Prop | Type | Description |
|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "full" | Maximum width of the dialog |
| overlay | { variant?: 'default' | 'none' } | Configure or hide the backdrop overlay |
| className | string | Additional classes on the dialog content |
Usage
<Dialog>
<Dialog.Trigger asChild>
<Button>Open</Button>
</Dialog.Trigger>
<Dialog.Content size="sm">
<Dialog.Header>
<span className="font-head">Title</span>
</Dialog.Header>
<Dialog.Body>
<Dialog.Description>Body text here.</Dialog.Description>
</Dialog.Body>
<Dialog.Footer>
<Button size="sm">Confirm</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog>