Components

Toast

A short message that appears for a moment after an action, like “Changes saved”, and closes itself.

DesignerDeveloper

Playground

Changes savedYour profile is up to date.

StyleDevice Description CTA buttons

Figma variant

Style=Success
Device=Desktop
Description=True
CTA Buttons=False
Close Button=True

Styles and devices

Five styles that color the icon, and Style=Icon for any icon or emoji. Desktop toasts are raised white cards; Mobile toasts are dark and hug their text.

DefaultDescription

InfoDescription

SuccessDescription

ErrorDescription

WarningDescription

Style=Icon

Mobile

Tokens

Part	Token
Card	`--color-surface-level-1, --radius-card, --shadow-form-level-1`
Mobile card	`--color-surface-background-invert, --color-foreground-level-2 title`
Padding	`--layout-tiny --layout-small --layout-tiny --layout-default`
Icon	`--color-primary / --color-info / --color-success / --color-error / --color-warning`
Title / description	`--text-ui-text-bold / --text-ui-text-small-regular`

Notes from Figma

Every style uses the info icon, colored by the tone; code does the same and takes another icon with icon.
Style=Icon uses an emoji (Emoji / Cookie) at 24px with an 8px radius; pass it as icon.
The Mobile description keeps foreground/medium-emphasis on the inverted background, and the Default Mobile icon stays primary, which is dark on dark in the light theme; code keeps both.
Figma has no stacking, timing or motion for toasts; code stacks them at the bottom center, closes them after 5 seconds and slides them in with motion-swipe-y.

Figma to code

Figma	React
Style = Default / Information / Success / Error / Warning	`tone='default' / 'info' / 'success' / 'error' / 'warning'`
Style = Icon + Change Icon	`icon={…}`
Device = Desktop / Mobile	`device='desktop' / 'mobile'`
Description / CTA Buttons / Close Button	`description / actions / onClose`