Variants
Notification
Something happened.
Saved
Your entry was saved.
Trial ending
Your trial ends in three days.
Error
Could not delete entry.
With icon
Notification
Something happened.
Saved
Your entry was saved.
Trial ending
Your trial ends in three days.
Error
Could not delete entry.
With CTA
Trial ending soon
Three days left on your free trial.
Unsaved changes
Leaving now will lose edits from this session.
Entry exported
Your notebook is ready to download.
Message only
Sync complete — your changes are on this device.
With dismiss
Entry saved
Your changes are on this device.
Dismiss meter
Entry saved
Auto-dismisses when the bar reaches the end.
Live toast
Live samples render inside this preview frame (mobile / tablet / desktop) with safe-area insets. Default placement is top-right — try each corner below.
Placement
Variant
Content
Animation variants
enterAnimationVariant — open and close each panel to compare fluid spring motion (default, spring, zoom) vs legacy ease presets.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| open / onClose | Optional | boolean + callback | — | Visibility control. |
| variant | Optional | ToastVariant | default | default, success, warning, danger. |
| title / message | Optional | string + ReactNode | — | Toast heading and body. |
| icon | Optional | ReactNode | — | Custom leading icon; overrides showIcon defaults. |
| showIcon | Optional | boolean | false | Show built-in variant icon when icon is not set. |
| action | Optional | ReactNode | — | CTA row — pass Button, Link, or a small action group. |
| duration | Optional | number | 5000 | Auto-dismiss ms; 0 disables timer. |
| showDismissMeter | Optional | boolean | false | Bottom countdown bar synced to duration (requires duration > 0). |
| placement | Optional | ToastPlacement | top-right | Screen corner — top-right, top-left, bottom-right, bottom-left, top-center, bottom-center. Uses safe-area insets on mobile. |
| portalRoot | Optional | HTMLElement | null | — | Optional portal host; positions the toast inside a container (e.g. preview frame) instead of the viewport. |
| ToastPanel | Optional | component | — | Static toast surface for inline layouts and docs. |
| ToastStack | Optional | component | — | Renders multiple toasts from an array; respects placement per toast. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |
| enterAnimationVariant | Optional | EnterAnimationVariant | default | Panel enter/exit — default and spring use fluid spring physics (Animate UI–style); zoom is a stronger pop; subtle keeps legacy ease motion; fade, slide-*, scale, or none. |