Modal
A dialog overlay with a configurable title, rich text body, and two footer action
buttons. The trigger button opens the modal. The right (confirm) action uses the
type field to switch between primary and danger styling. The left
(cancel) action is always a neutral secondary style.
CSS variables
| Variable | Theme field | Used for |
|---|---|---|
--color-primary | global_colors.primary_color | Trigger button and primary confirm action button background |
--color-surface | global_colors.menu_background | Cancel button background and modal body background |
--color-heading | global_colors.heading_color | Cancel button text color and modal title |
--color-border | global_colors.border_color | Cancel button border; header and footer divider lines |
--color-page-bg | global_colors.page_color | Modal footer background tint |
--color-error | global_colors.error_color | Danger confirm action button background |
Primary confirm
The confirm action button uses --color-primary. Use for positive confirmations — saving changes, submitting a form, creating a record, or proceeding through a flow. The action is constructive or neutral.
Open modal
Save changes
If you continue, you’ll lose all the changes you’ve made, and this can’t be undone. Are you sure you want to proceed?
Danger confirm
The confirm action button uses --color-error. Use for destructive confirmations — permanently deleting a record, archiving with no recovery, removing access, or discarding unsaved work. The error color signals that the action cannot be undone.
Delete record
Are you sure?
If you continue, you’ll lose all the changes you’ve made, and this can’t be undone. Are you sure you want to proceed?