Prototype Library

Snackbar Item

A single toast: variant color, leading icon, message, and optional action and dismiss buttons. It emits action and dismiss. Usually managed by esa-snackbar-container, but it renders standalone too.

Inherited wc import '@esa/ecology/esa-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

PropTypeDefaultDescription
message string '' Toast body text.
variant 'info' | 'success' | 'warning' | 'danger' 'info' Background color and leading icon.
action string '' Optional action button label. Omit to hide it.
dismissable boolean true Renders the close (×) button. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value.
icon string ''

Events

EventTypeDefaultDescription
action CustomEvent — Fired when the action button is pressed; the item also dismisses itself.
dismiss CustomEvent — Fired when the close button is pressed.
Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

  • (action)="onAction($event.detail)"
  • (dismiss)="onDismiss($event.detail)"

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.