ComponentsAlert Dialog
Alert Dialog
componentA confirmation modal that names the object and its destructive action.
Confirm delete
A confirm step before destructive actions.
Delete project?
This will permanently delete ai-router, its history, and 12 deployed environments. Cannot be undone.
Composes: Card · Button
Recipe CSS
This is the exact CSS your kit ships for Alert Dialog — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.
/* === Alert Dialog ===
Dialog variant with a destructive emphasis — used for "Delete account?",
"Discard changes?" confirmations where the consequence is irreversible.
Identical to .dialog visually but role="alertdialog" semantically + the
primary CTA is danger-styled. The class adds a left-border accent. */
.dialog--alert {
border-left: 3px solid var(--k-danger);
}
.dialog--alert .dialog__icon {
width: var(--k-icon-chip);
height: var(--k-icon-chip);
border-radius: 50%;
background: var(--k-danger-soft);
color: var(--k-danger-soft-fg);
display: inline-grid;
place-items: center;
margin-bottom: var(--k-s-4);
}