Components

Toast

A short message about the result of an action that appears in a corner of the page, stacks and can be swiped away.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Neutral	No icon	`color-surface-raised`
Success / info / warning / error	Icon in the status colour	`color-icon-success`, `color-icon-info`, `color-icon-warning`, `color-icon-danger`
Loading	Spinner	`period-spinner`
Stacked	Toasts behind show 12 px and shrink by 5 %	`toast-peek`
Expanded stack	Toasts line up 8 px apart	`toast-gap`

Measurements

Property	Value	Token
Width	360 px; below 640 px the screen minus the margin	`toast-width`
Margin	24 px	`toast-margin`
Padding	16 px	`space-lg`
Corner radius	14 px	`toast-radius`
Title / description	`label-md` / `body-sm`	`text.label-md`, `text.body-sm`

Tokens

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

Token	Sample	Light mode	Dark mode
`--bigbang-toast-width`		`360px360px360px`	`360px360px360px`
`--bigbang-toast-gap`		`8px8px8px`	`8px8px8px`
`--bigbang-toast-peek`		`8px8px8px`	`8px8px8px`
`--bigbang-toast-margin`		`16px16px16px`	`16px16px16px`
`--bigbang-color-surface-raised`		`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-border-overlay`		`#ededed#ededed#ededed`	`rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)`
`--bigbang-shadow-overlay`		`0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)`
`--bigbang-toast-radius`		`14px14px14px`	`14px14px14px`
`--bigbang-color-icon-success`		`#138a50#138a50#138a50`	`#7dd09b#7dd09b#7dd09b`
`--bigbang-color-icon-info`		`#007ac1#007ac1#007ac1`	`#79c2ff#79c2ff#79c2ff`
`--bigbang-color-icon-warning`		`#a16600#a16600#a16600`	`#ecac5f#ecac5f#ecac5f`
`--bigbang-color-icon-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-motion-toast-enter-duration`		`0.24s0.24s0.24s`	`0.24s0.24s0.24s`
`--bigbang-motion-toast-exit-duration`		`0.15s0.15s0.15s`	`0.15s0.15s0.15s`
`--bigbang-motion-toast-distance`		`8px8px8px`	`8px8px8px`
`--bigbang-motion-list-move-duration`		`0.31s0.31s0.31s`	`0.31s0.31s0.31s`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Enter (`motion.toastStack`)	`opacity`, `translate` 8 px up	`motion-toast-enter-duration`	`motion-toast-enter-easing`	Distance 0; fades in only.
Exit	`opacity`	`motion-toast-exit-duration`	`motion-toast-exit-easing`	Unchanged.
Stack and expand	`translate`, `scale`	`motion-list-move-duration`	`easing-spring-productive-base`	Shorter.
Swipe	`translate` follows the finger and leaves past the edge on release	None (no transition)	None	Unchanged.
Success icon (`motion.success`)	`opacity`, `scale`	`motion-feedback-duration`	`motion-feedback-easing`	Fades in only.

See Motion for the values.