Browse components

Toast

Toast atom for a single surface; use the Toaster molecule plus pushToast() for stacked app notifications with countdown and expandable detail.

atoms 4 variants
Variants / states: infosuccesswarningerror

Live example

Default usage you can copy and adapt.

Toaster (recommended)

Mount once in the app shell; pushToast() queues notifications shown here (bottom-right).

Triggers below call pushToast(). The live region is fixed bottom-right (same as a real app).

Toast atom — inline

Use layout="inline" for docs and embedded UI; default layout="viewport" pins a single toast to the corner.

Same surface as viewport toasts, but layout="inline" keeps it in the document flow for docs and previews.

Semantic types

type sets border and text: success, error, warning, or info.

The type prop maps to semantic border and text colors.

Props

The props you are most likely to need, with types and defaults.

Props / API
NameTypeRequiredDefaultDescription
messagestringNo—Toast message
type'success' | 'error' | 'warning' | 'info'NoinfoSemantic style
closablebooleanNotrueShow close button
classstringNo—Extra classes on the toast container
onclick(event: Event) => voidNo—Called when the toast is closed
layout'viewport' | 'inline'Noviewportviewport: fixed corner toast; inline: block width up to max (for demos inside a sized parent)