Alert Dialog
A modal dialog that interrupts the user with important content and expects a response. Supports feedback variants (regular, emphasis, warning, error, success) with optional icon and tag slots.
Examples
Regular (Default)
The regular variant is used for standard information or confirmation dialogs. All examples now include an icon and a tag for a richer header.
Preview
Emphasis
The emphasis variant uses a secondary color scheme to highlight important or featured content.
Preview
Error
Use the error variant for destructive actions or critical failure notifications.
Preview
Warning
The warning variant is ideal for actions that require caution but are not necessarily destructive.
Preview
Success
The success variant confirms positive actions or successful completions.
Preview
With Close Button
Use showCloseButton on AlertDialogContent to render an × button in the top-right corner, allowing the user to dismiss the dialog without selecting an action.
Preview
API
AlertDialog
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| variant | string | ’regular’, ‘emphasis’, ‘warning’, ‘error’, ‘success’ | regular | Sets the feedback color scheme. Propagated via context to AlertDialogIcon, AlertDialogTag, and AlertDialogAction. |
| 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 |
|---|---|---|---|---|
| showCloseButton | boolean | true, false | false | Renders an × button in the top-right corner that dismisses the dialog. |
| overlayClassName | string | - | - | Additional CSS classes to apply to the overlay. |
| className | string | - | - | Additional CSS classes to apply to the content. |
| …props | All Radix AlertDialog.Content props | - | - | All native properties of the Radix UI AlertDialog Content component. |
AlertDialogIcon
Optional slot for a feedback icon above the title. Reads variant from AlertDialog context to apply the matching background and text color. When present, the header automatically centers all its content.
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| icon | ReactNode | - | - | The icon element to render. SVGs are sized to 32px automatically. |
| className | string | - | - | Additional CSS classes for the icon section container. |
AlertDialogTag
Optional slot for a styled tag above the title. Reads variant from AlertDialog context automatically. Pass variant explicitly to override the inherited value.
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| variant | string | ’regular’, ‘emphasis’, ‘warning’, ‘error’, ‘success’ | Inherited from AlertDialog | Overrides the color scheme inherited from the parent AlertDialog context. |
| children | ReactNode | - | - | The tag label text or content. |
| className | string | - | - | Additional CSS classes for the tag element. |
AlertDialogAction
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| variant | string | Button variants (‘regular’, ‘emphasis’, ‘error’, ‘success’, etc.) | Inherited from AlertDialog variant | The visual variant of the button. When omitted, inherits from the parent AlertDialog variant. An explicit value always overrides the context. |
| size | string | ’sm’, ‘md’, ‘lg’, ‘xl’ | lg | 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’, ‘emphasis’, ‘error’, ‘success’, etc.) | regular-soft | The visual variant of the button. |
| size | string | ’sm’, ‘md’, ‘lg’, ‘xl’ | lg | The size of the button. |
| …props | All Radix AlertDialog.Cancel props | - | - | All native properties of the Radix UI AlertDialog Cancel component. |