Snackbar

Transient snackbar toasts for lightweight feedback at the edge of the viewport. Styles live in scss/components/_snackbar.scss with .progress--sm for the optional timer bar. For persistent inline messages, use Alerts; for blocking decisions, use Modals.

Semantic variants

Five surfaces aligned with the design spec: snackbar--brand, snackbar--information, snackbar--success, snackbar--warning, snackbar--error. Title color follows the variant accent; description uses text-body.

<div class="snackbar snackbar--success" role="status" aria-live="polite">
  <div class="snackbar__main">
    <span class="snackbar__icon" aria-hidden="true"></span>
    <div class="snackbar__body">
      <div class="snackbar__text">
        <p class="snackbar__title">Saved</p>
        <p class="snackbar__description">Your changes were stored.</p>
      </div>
    </div>
    <button type="button" class="snackbar__close" aria-label="Close">×</button>
  </div>
</div>

Dismissible

Always provide .snackbar__close with an accessible name. Wire dismiss with data-snackbars-live (see Behavior) or your own handler that sets hidden on the root.

Auto-dismiss and progress

Optional data-snackbar-auto-dismiss="{ms}" removes the snackbar after a delay. Pair with .snackbar__progress for a decorative countdown (hide the bar from assistive tech with aria-hidden="true" unless you reflect remaining time in copy).

Live toast host

In apps, mount snackbars in a fixed viewport region (for example bottom-end). The demo clones a template into #pdoc-snackbar-host when you click the button.

Behavior in your app

Copy docs-site/src/lib/snackbar-behavior.ts and call wireAllSnackbars() after load. Handles close buttons, auto-dismiss timers (visible in viewport), progress animation, and the doc demo host.

import { wireAllSnackbars } from './snackbar-behavior';

document.addEventListener('DOMContentLoaded', () => wireAllSnackbars());

Class reference

Customize (Sass)

1. 01

   Snackbar layout

   Override width, padding, and close target before importing components.
   variables

   @use "pimentcss-design-system" with (
     $snackbar-max-width: 28rem,
     $snackbar-padding-y: 1rem,
     $snackbar-close-target: 2.75rem
   );

2. 02

   Rebuild CSS

   Run after editing _snackbar.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps