Component

Alert Dialog

Interrupts the user with a mandatory confirmation, unlike Dialog it cannot be dismissed by clicking outside or pressing Escape.

AlertDialogContentsize: default · sm

AlertDialogMediaicon slot above title

AlertDialogActionconfirm — renders as Button

AlertDialogCanceldismiss — renders as Button outline

Playground

Size— size

Show media icon— showMedia

Destructive action— destructive

neutral confirmation

delete confirmation with media icon

size="sm" — compact footer grid

text-only header

positive media icon

11 semantic tokens consumed by this component.

--popoverPopover

bg-popover

--popover-foregroundPopover Foreground

text-popover-foreground

--mutedMuted

bg-mutedtext-mutedborder-muted

--muted-foregroundMuted Foreground

text-muted-foreground

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary

--primary-foregroundPrimary Foreground

text-primary-foregroundbg-primary-foreground

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive

--destructive-foregroundDestructive Foreground

text-destructive-foreground

--borderBorder

border-borderborder

--inputInput

bg-inputborder-input

--ringRing

ring-ringring