Alert Dialog
A modal that interrupts the user with a destructive or irreversible action and requires an explicit response.
Usage
Unlike Dialog, an alert dialog cannot be dismissed by clicking outside: the
user must choose. Use it for destructive or irreversible actions; use Dialog
for everything else. Compose it like Dialog: portal, overlay, and panel are
yours to assemble.
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
} from '@epilot/spark-ui/alert-dialog'<AlertDialog>
<AlertDialogTrigger render={<Button color="danger">Delete device</Button>} />
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogCancel aria-label={t('close')} />
<AlertDialogHeader>
<AlertDialogMedia>
<MaterialSymbol name="warning" />
</AlertDialogMedia>
<AlertDialogTitle>Delete this device?</AlertDialogTitle>
<AlertDialogDescription>
The device and its schedules are removed from your home. This cannot
be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction styleVariant="soft" color="danger">
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogPortal>
</AlertDialog>AlertDialogAction and AlertDialogCancel render as Buttons, so pass
styleVariant / color / size directly (defaults: solid accent action,
surface/neutral cancel). A bare
AlertDialogCancel renders the corner X (pass a translated aria-label); with
a render prop it stays the bare primitive and the consumer supplies the
button.
AlertDialogMedia is an optional icon tile the header lays out automatically.
API Reference
Built on top of Base UI Alert Dialog. See the Base UI documentation for the full API.