OVERLAY

AlertDialog

AlertDialog gives irreversible or consequential actions an explicit confirmation step owned by a bool Signal.

PLAYGROUND

Confirm a destructive action

The dialog panel stays neutral while scheme colors the generated confirm action. onConfirm and onCancel point to ordinary sequential view functions.

dowe
signal deleteDialogOpen value:false

fn openDeleteDialog
  set deleteDialogOpen value:true

fn closeDeleteDialog
  set deleteDialogOpen value:false

fn confirmDeleteDialog
  set deleteDialogOpen value:false

Button onClick:openDeleteDialog variant:"solid" scheme:"danger"
  "Delete project"

AlertDialog open:deleteDialogOpen title:"Delete Northstar project?" description:"This cannot be undone." confirmText:"Delete project" cancelText:"Keep project" onConfirm:confirmDeleteDialog onCancel:closeDeleteDialog scheme:"danger"

DECISION FLOWS

Make the decision visible

Use the same primitive for destructive removal, an in-progress publish, or a reversible archive. The copy and scheme should match the consequence, not the component name.

DESTRUCTIVE

Delete

Name the scope of the deletion and keep the confirm action danger-colored.

IN PROGRESS

Publish

A static loading state keeps the confirmation surface visible while work is completing.

REVERSIBLE

Archive

Use a softer warning scheme when the action removes content from the active view but keeps history.

dowe
AlertDialog open:publishDialogOpen title:"Publish current workspace?" description:"The generated site will become the active preview." confirmText:"Publishing..." cancelText:"Cancel" onConfirm:closePublishDialog onCancel:closePublishDialog variant:"soft" scheme:"success" loading:true

BEHAVIOR

A small contract with strong defaults

AlertDialog requires an open bool Signal. Its generated actions use the declared labels and invoke the corresponding functions after the user makes a choice.

1 · OPEN

Own visibility

Bind open to a bool Signal path and set it from a named view function.

2 · DECIDE

Describe consequence

title and description explain the decision before the generated actions appear.

3 · RESOLVE

Handle both exits

Use onConfirm and onCancel to update state, close the dialog, or continue a workflow.

AlertDialog has no arbitrary children. Put task-specific content in the surrounding page or use Modal when the dialog needs a custom body.

VISUAL EMPHASIS

The panel remains neutral

scheme is intentionally applied to the generated confirm action. Choose a semantic family that explains the result without recoloring the entire dialog.

Danger confirmation

Success confirmation

dowe
AlertDialog open:deleteOpen scheme:"danger" title:"Delete project?" description:"This cannot be undone." confirmText:"Delete" cancelText:"Cancel" onConfirm:deleteProject onCancel:closeDelete

AlertDialog open:publishOpen variant:"soft" scheme:"success" title:"Publish changes?" description:"The preview will become active." confirmText:"Publish" cancelText:"Cancel" onConfirm:publish onCancel:closePublish

API

Props

AlertDialog also accepts applicable common spacing, sizing, visibility, border, radius, typography, and accessibility props.

Prop
Type
Default

No data

There are no records to display