AlertDialog

A modal dialog that interrupts the user with important content and expects a response. Commonly used for destructive action confirmations.

Basic Usage

Click the button below to open a confirmation dialog.

Success Confirmation

A positive confirmation after completing an action.

Unsaved Changes

A warning dialog with multiple actions — save, discard, or stay.

Info / Policy

An informational dialog requiring user acknowledgment.

Destructive Action

A high-stakes deletion confirmation with detailed consequences.

All Variants

Four dialog types side by side — success, info, warning, and error.

AlertDialog Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the dialog is open (controlled).
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

open

boolean

Whether the dialog is open (controlled).

onOpenChange

(open: boolean) => void

Called when the open state changes.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

AlertDialog.Content Props

Prop	Type	Default	Description
`title`	`string`	—	The title displayed at the top of the dialog.
`description`	`string`	—	Descriptive text displayed below the title.

title

string

The title displayed at the top of the dialog.

description

string

Descriptive text displayed below the title.

AlertDialog.Action Props

Prop	Type	Default	Description
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the action button.

color"blue"

Accent color for the action button.

AlertDialog.Cancel Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The label for the cancel button.

children

ReactNode

The label for the cancel button.