Bottom-right toast stack with auto-dismiss. Drive it imperatively — show(config), the variant shorthands, dismiss(id), and clearAll(). Defaults to info / 5000ms / dismissable, with uniqueKey dedupe.
Shows a toast. config: { message, variant?, duration?, action?, dismissable?, uniqueKey? }. Returns its id.
success / info / warning / danger(msg, config?)
method
—
Shorthands for show() with that variant.
dismiss(id)
method
—
Removes the toast with that id.
clearAll()
method
—
Removes every active toast.
Config object (show)
Prop
Type
Default
Description
message
string
—
Toast body text.
variant
'info' | 'success' | 'warning' | 'danger'
'info'
Color and leading icon.
duration
number
5000
Auto-dismiss delay in ms; 0 keeps it until dismissed.
action
string
—
Optional action button label.
dismissable
boolean
true
Renders the close button.
uniqueKey
string
—
Dedupe key — a second show() with the same key is ignored.
Events
Event
Type
Default
Description
snackbar-action
CustomEvent<{ id: string }>
—
Fired when a toast's action button is pressed.
Accessibility
Toasts auto-dismiss after duration; provide enough time to read, or set duration: 0 for important messages.
Each toast renders an esa-snackbar-item with a labelled dismiss button.
The newest toast appears at the bottom of the stack (column-reverse), nearest the user's attention.
Theming surface
Every public token this component reads, extracted from its source at build time.
The Resolves to column walks each token's real lineage —
component → semantic → primitive → raw value — so you
can see exactly where re-pointing it lands. A spoke re-skins by overriding these in
its theme-<slug>.css; component internals are never edited. No
hook for what you need? File it with /request-lego.