Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Examples
Default
Preview
variants
You can use the same variants as the Button component.
Preview
API
AlertDialog
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| open | boolean | true, false | - | Controls the open state (controlled). |
| onOpenChange | (open: boolean) => void | - | - | Called when the open state changes. |
| …props | All Radix AlertDialog.Root props | - | - | All native properties of the Radix UI AlertDialog Root component. |
AlertDialogTrigger
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| asChild | boolean | true, false | false | When true, uses the child as the trigger. |
| …props | All Radix AlertDialog.Trigger props | - | - | All native properties of the Radix UI AlertDialog Trigger component. |
AlertDialogContent
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| className | string | - | - | Additional CSS classes to apply. |
| overlayClassName | string | - | - | Additional CSS classes to apply to the overlay component. |
| …props | All Radix AlertDialog.Content props | - | - | All native properties of the Radix UI AlertDialog Content component. |
AlertDialogAction
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| variant | string | Button variants (‘regular’, ‘error’, ‘success’, etc.) | regular | The visual variant of the button. |
| size | string | ’sm’, ‘md’, ‘lg’, ‘xl’ | md | The size of the button. |
| …props | All Radix AlertDialog.Action props | - | - | All native properties of the Radix UI AlertDialog Action component. |
AlertDialogCancel
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| variant | string | Button variants (‘regular’, ‘error’, ‘outlined’, etc.) | outlined | The visual variant of the button. |
| size | string | ’sm’, ‘md’, ‘lg’, ‘xl’ | md | The size of the button. |
| …props | All Radix AlertDialog.Cancel props | - | - | All native properties of the Radix UI AlertDialog Cancel component. |
Last updated on