AlertDialog
Modal confirmation dialog built on Radix UI. Blocks interaction until the user responds. Supports a destructive action variant.
Live Demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
AlertDialog | Radix Root | — | Root component that controls open/closed state. |
AlertDialogTrigger | Radix Trigger | — | Element that opens the dialog. |
AlertDialogContent | Radix Content | — | The modal panel with overlay. |
AlertDialogTitle | Radix Title | — | Accessible title of the dialog. |
AlertDialogDescription | Radix Description | — | Accessible description of the dialog. |
AlertDialogAction | Radix Action | — | Confirm/proceed button. Closes the dialog. |
AlertDialogCancel | Radix Cancel | — | Cancel button. Closes the dialog without action. |
variant (Action) | 'default' | 'destructive' | 'default' | Action button variant: default or destructive. |
Usage
import {
AlertDialog, AlertDialogTrigger, AlertDialogContent,
AlertDialogHeader, AlertDialogFooter,
AlertDialogTitle, AlertDialogDescription,
AlertDialogAction, AlertDialogCancel,
} from '@ghiberti85/ui'
// Default
<AlertDialog>
<AlertDialogTrigger asChild>
<Button>Open</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
// Destructive variant
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>