Dialog
Modal dialogs for focused interactions. By default the dialog renders as a tinted surface on the white canvas, and can be inverted to a white surface on a tinted block.
Basic Dialog
A simple dialog with header, content, and close button. The dialog surface defaults to a lightly tinted tray style.
Dialog with Form
A dialog containing a form with inputs and a compact action footer.
Confirmation Dialog
A destructive action confirmation dialog with warning styling.
Settings Dialog
A larger dialog for settings or configuration with multiple sections.
Without Close Button
A dialog that hides the default close button, requiring explicit user action. Uses ScrollArea for long content.
Inverted Canvas
Tinted canvas block with dialogs flipped to a white surface.
Quick actions
Use a tinted block as the local canvas, and keep primary surfaces white.