Components

AlertDialog

A modal window that interrupts a task to ask one question, to confirm or cancel.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Opening	Same enter as Dialog	`motion-dialog-enter-duration`
Open	400 px panel with an overlay hairline and a shadow; actions on a band at the bottom, at the end	`dialog-width-sm`, `color-border-overlay`, `shadow-overlay`, `color-surface-layer-1`
Narrow (< 640 px)	Title, description and icon centred; actions stacked full width	`space-md`
Destructive	Danger fill on the confirm button	`color-action-danger-default`
Busy	Spinner on the confirm button; cancel disabled	`color-action-disabled-default`
Closing	Same exit as Dialog	`motion-dialog-exit-duration`

Measurements

Property	Value	Token
Width	400 px	`dialog-width-sm`
Padding	16 px; 24 px from 640 px up	`dialog-padding-sm`, `dialog-padding-md`
Gap between title and description	6 px	`space-sm`
Corner radius	14 px	`dialog-radius`
Title style	`label-lg` (16 px medium)	`text.label-lg`
Icon tile (`icon`)	40 px, 8 px corners, 24 px icon; beside the title from 640 px, 16 px apart	`dialog-media`, `radius-md`, `space-xl`
Icon tile fill	Neutral: `surface-sunken`; `danger`: `status-danger-background`	`color-surface-sunken`, `color-status-danger-background`

Tokens

Values follow the selected brand; change the brand in the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-dialog-width-sm`		`400px400px400px`	`400px400px400px`
`--bigbang-dialog-radius`		`14px14px14px`	`14px14px14px`
`--bigbang-dialog-padding-sm`		`16px16px16px`	`16px16px16px`
`--bigbang-dialog-padding-md`		`24px24px24px`	`24px24px24px`
`--bigbang-dialog-media`		`40px40px40px`	`40px40px40px`
`--bigbang-color-surface-raised`		`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-surface-sunken`		`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-surface-scrim`		`rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)`	`rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)`
`--bigbang-color-status-danger-background`		`#ffe8e7#ffe8e7#ffe8e7`	`#4c1d1d#4c1d1d#4c1d1d`
`--bigbang-color-action-danger-default`		`#a6383c#a6383c#a6383c`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-motion-dialog-enter-duration`		`0.24s0.24s0.24s`	`0.24s0.24s0.24s`
`--bigbang-motion-dialog-exit-duration`		`0.15s0.15s0.15s`	`0.15s0.15s0.15s`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Panel enter and exit	`motion.dialog`	`motion-dialog-enter-duration`, `motion-dialog-exit-duration`	`motion-dialog-enter-easing`, `motion-dialog-exit-easing`	Fades only.
Backdrop	`motion.scrim`	Same as the panel	Same as the panel	Unchanged.
Busy confirm	Button loading spinner	`period-spinner`	Linear	The spin stops.

See Motion for the values.