Default
Soft Confirmation
Sub-components
| Sub-component | Type | Description |
|---|---|---|
| AlertDialog | Root | Wraps the alert dialog. Controls open state. |
| AlertDialog.Trigger | Radix Trigger | Element that opens the dialog. |
| AlertDialog.Content | Component | The dialog panel with overlay and animations. |
| AlertDialog.Header | div | Container for title and description. |
| AlertDialog.Title | Radix Title | Accessible title for the dialog. |
| AlertDialog.Description | Radix Description | Accessible description text. |
| AlertDialog.Footer | div | Container for action and cancel buttons. |
| AlertDialog.Action | Radix Action | Confirms the action. Styled as primary button. |
| AlertDialog.Cancel | Radix Cancel | Dismisses the dialog. Styled as secondary button. |
Usage
<AlertDialog>
<AlertDialog.Trigger asChild>
<Button>Delete</Button>
</AlertDialog.Trigger>
<AlertDialog.Content>
<AlertDialog.Header>
<AlertDialog.Title>Are you sure?</AlertDialog.Title>
<AlertDialog.Description>
This action cannot be undone.
</AlertDialog.Description>
</AlertDialog.Header>
<AlertDialog.Footer>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action>Continue</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog>