OVERLAY

AlertDialog

AlertDialog gives consequential actions a Card-resolved neutral panel and portable Button actions owned by one bool Signal.

PLAYGROUND

Confirm a destructive action

The panel stays neutral while variant follows Card, scheme colors the solid confirm Button, and cancel uses an outlined muted Button on every target.

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 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 applied to the generated solid confirm Button with its matching on-color. The panel remains neutral and the cancel Button remains outlined muted.

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

TARGET PARITY

One decision surface on every target

Web, Android Compose, the Android development launcher, and iOS use the same Card panel rules and medium Button metrics.

PANEL

Neutral Card surface

variant controls the neutral surface weight, including the same outlined border behavior as Card.

CANCEL

Outlined muted Button

The generated cancel action keeps the same medium height, padding, radius, and muted border.

CONFIRM

Solid semantic Button

The generated confirm action uses scheme for its fill and the matching on-color for readable text.

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