Prototype Library

Snackbar Container

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.

Inherited wc import '@esa/ecology/esa-snackbar-container';

Preview

Place one container on the page, then call its methods: el.success('Saved.').

<button data-kind="success">Success</button>

<esa-snackbar-container id="toasts"></esa-snackbar-container>

API

Methods

PropTypeDefaultDescription
show(config) method — 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)

PropTypeDefaultDescription
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

EventTypeDefaultDescription
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.