Alert Dialog
Ask for confirmation before an action that needs extra care.
Preview
Import
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from "@sigil-ui/components";Usage
<AlertDialog>
<AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Sub-components
This component includes the following parts:
<AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogFooter><AlertDialogTitle><AlertDialogDescription><AlertDialogAction><AlertDialogCancel>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-overlay-bg | Overlay bg |
--s-overlay-blur | Overlay blur |
--s-duration-fast | Duration fast |
--s-overlay-padding | Overlay padding |
--s-overlay-radius | Overlay radius |
--s-radius-lg | Radius lg |
--s-overlay-surface | Overlay surface |
--s-surface | Surface |
--s-border-style | Border style |
--s-overlay-border | Overlay border |
--s-border | Border |
--s-overlay-shadow | Overlay shadow |