GitHub

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.

Stable wc import '@esa/ecology/esa-snackbar-item'; Angular usage

Preview

<esa-snackbar-item variant="success" message="Saved successfully."></esa-snackbar-item>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-snackbar-item';

@Component({
  selector: 'app-snackbar-item-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-snackbar-item variant="success" message="Saved successfully."></esa-snackbar-item>
  `,
})
export class SnackbarItemDemo {}

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>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-snackbar-item';

@Component({
  selector: 'app-snackbar-item-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <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>
  `,
})
export class SnackbarItemDemo {}

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>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-snackbar-item';

@Component({
  selector: 'app-snackbar-item-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <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>
  `,
})
export class SnackbarItemDemo {}

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.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

RoleRe-pointReach
.typography-body-md
  • --typography-body-md-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-body-md-font-size clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) via --font-size-200
  • --typography-body-md-font-weight 350 via --typography-font-weight-regular → --font-weight-350
  • --typography-body-md-letter-spacing 0.01em via --letter-spacing-default
  • --typography-body-md-line-height 1.6 via --line-height-normal
+28 more components esa-app-shell, esa-breadcrumbs, esa-card, esa-checkbox, esa-checkbox-group, esa-collapsible, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-container, esa-danger-zone, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-form-field, esa-header-nav, esa-input-tag, esa-nav-dropdown, esa-page-header, esa-popover, esa-progress-bar, esa-radio-group, esa-select, esa-side-dialog, esa-switch-toggle, esa-tab-layout, esa-textarea
.typography-microcopy-sm-strong
  • --typography-microcopy-sm-strong-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-microcopy-sm-strong-font-size clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) via --font-size-150
  • --typography-microcopy-sm-strong-font-weight 550 via --typography-font-weight-semibold → --font-weight-550
  • --typography-microcopy-sm-strong-letter-spacing 0.01em via --letter-spacing-default
  • --typography-microcopy-sm-strong-line-height 1 via --line-height-none
+1 more component esa-badge

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.

Token Reach Resolves to
--focus-ring-offset component focus ring group · +31 more 2px
--focus-ring-width component focus ring group · +35 more 2px via --border-width-focus → --border-width-200
--animation-overlay-enter semantic every component 250ms via --duration-250
--color-background-default-knockout semantic every component #202020 via --color-gray-12
--color-content-default-knockout semantic every component #fcfcfc via --color-gray-1
--color-content-utility-danger semantic every component #ce2c31 via --color-red-11
--color-content-utility-info semantic every component #0d74ce via --color-blue-11
--color-content-utility-success semantic every component #218358 via --color-green-11
--color-content-utility-warning semantic every component #ab6400 via --color-yellow-11
--elevation-4 semantic every component 0 via --shadow-offset-x
--radius-md semantic every component 0.5rem via --radius-200
--radius-sm semantic every component 0.25rem via --radius-100
--spacing-100 primitive every component 0.25rem
--spacing-200 primitive every component 0.5rem
--spacing-300 primitive every component 0.75rem
--spacing-400 primitive every component 1rem