order
Modal
A dialog with a title, body and actions, for confirmations and focused tasks.
Confirm deleteOpen it, then close with Cancel, the close button, Escape or a click outside
In context
Project settingsA destructive action behind a confirmation
Depot signage
Wayfinding for the three northern depots. Due 21 Nov.
Shape
{ type: "modal", title: string, blocks: Construct[], confirmLabel?: string, cancelLabel?: string }Example block
[
{
"type": "modal",
"title": "Delete Depot signage?",
"confirmLabel": "Delete",
"cancelLabel": "Keep it",
"blocks": [
{
"type": "doc-section",
"body": [
{
"kind": "text",
"text": "21 tasks and 5 files go with it."
}
]
}
]
}
]The block always renders open
A modal block renders its Dialog with open forced true and no close handler, for static renders such as mockups. The live examples here use the real Dialog with a trigger button instead.