Alert Dialog

A modal dialog that interrupts the user with important content and requires a response.

Alert Dialog

Installation

pnpm dlx stera-ui@latest add alert-dialog

Composition

Use the following composition to build an AlertDialog:

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Examples

With Media

Use AlertDialogMedia to display an icon above the title for additional visual context.

Small Size

Destructive

Pass variant="danger" to AlertDialogAction for destructive confirmations.

API Reference

Built on Base UI's Alert Dialog primitive — see the full API reference there.

AlertDialogContent

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`

AlertDialogAction

Prop	Type	Default
`variant`	`"default" \| "danger"`	`"default"`

AlertDialogTrigger

Prop	Type	Description
`render`	`ReactElement`	Render prop for the trigger element