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.
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 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.
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 intentionally applied to the generated confirm action. Choose a semantic family that explains the result without recoloring the entire dialog.
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:closePublishAPI
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 | ||