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.
Delete Northstar project?
All generated previews, settings, and project history will be removed. This cannot be undone.
Archive Northstar project?
The project will leave the active workspace but its history can be restored later.
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.
Publish current workspace?
The generated site will become the active preview for everyone with access to this project.
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:trueBEHAVIOR
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
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:closePublishTARGET 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 dataThere are no records to display | ||