Snackbar Item

Preview

<esa-snackbar-item variant="success" message="Saved successfully."></esa-snackbar-item>

Variants

<esa-snackbar-item variant="info" message="Heads up — this is an info toast."></esa-snackbar-item>
<esa-snackbar-item variant="success" message="Saved successfully."></esa-snackbar-item>
<esa-snackbar-item variant="warning" message="Your session expires soon."></esa-snackbar-item>
<esa-snackbar-item variant="danger" message="Something went wrong."></esa-snackbar-item>

States

Add an action label, or set dismissable={false} for a toast that cannot be manually closed.

<esa-snackbar-item variant="success" message="Item deleted." action="Undo"></esa-snackbar-item>
<esa-snackbar-item variant="info" message="Cannot be dismissed manually." dismissable={false}></esa-snackbar-item>

API

Events

Accessibility

• The dismiss button carries an aria-label="Dismiss"; the leading icon is decorative (aria-hidden).
• Variant color is paired with a distinct icon, so meaning is not conveyed by color alone.
• When used standalone, announce the message in a live region appropriate to its urgency.

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.