pleate.ui
Overlay

Alert Dialog

A small confirmation dialog for decisions that need an answer: left-aligned title and message, cancel and the main action at the bottom right. Cancel is focused first; destructive actions are red.
import { AlertDialog } from "pleate/alert-dialog";

Destructive and three-way

Props

title / description

Question and context.

ReactNode

icon

Shown in a round tile beside the title; red when an action is destructive.

ReactNode

showClose

Round × in the corner; cancels like Escape.

booleandefault true

closeLabel

Its accessible name.

stringdefault "Close"

actions

Buttons, in order.

{ label, onSelect?, role?: "default" | "cancel" | "destructive" }[]

buttons

A row at the bottom right that stacks full width on phones; row never stacks, stack always does.

"auto" | "row" | "stack"default "auto"

trigger / open / onOpenChange

Uncontrolled or controlled.

children

Extra content (e.g. a text field).

ReactNode

Accessibility

  • role=alertdialog; it does not close on outside click.
  • Focus starts on the cancel action.