Snackbar

Features

• Programmatic showSnackbar({ variant, title, message, actionLabel, duration }) API — nine variants: the four semantic states (success, info, warning, error), the in-flight pending state, two differentiated-group notices (mention, schedule) and two solid bars (brand, offline), each with its own Tabler glyph
• Every variant carries a colour TRIO, never one token: the authored FILL for the plate and wash (the state or category token verbatim, in both themes — no mix, no re-derivation), a gated ON ink for the glyph on that fill, and a readable INK for the action label, outline and progress rail on the surface
• Colour plate — a full-height column on the bar's left in the variant's authored hue with the glyph in the shell's contrast-gated on-fill companion; it rides both left corners of the frame and is clipped concentric by it
• Tinted wash — the plate's colour bleeds into the bar as a translucent gradient over the surface; the bar keeps only its neutral elevation, no colour glow
• Solid bars — brand paints the whole bar in the selection fill with the accent ink, offline inverts the surface into the text colour; every line of copy, the close button, the outlined action and the rail take the gated on-fill ink
• Every action button carries its own opaque ground (the surface, or the solid bar's fill), so a contrast walker that composites ancestor backgrounds resolves the ground the eye sees rather than the wash gradient's first stop
• Auto-dismiss timer with a per-variant duration and a progress rail that starts and ends on the same vertical lines as the copy, driven frame-by-frame via requestAnimationFrame and --snk-p scaleX
• Focusing a snackbar pauses its timer and progress rail; leaving resumes from where it stopped
• Self-running tour — on load the demo seeds success, mention and brand, and a rotating single variant respawns whenever the stack empties
• Stack capped at four visible snackbars — the oldest is dismissed when the cap is exceeded
• Two-layer entrance — the wrapper slides up with a fade (rises from the bottom on mobile) while the body springs in with a soft scale
• FLIP restack — survivors glide into place after a dismissal and existing snackbars shift up smoothly when a new one arrives
• Escape dismisses the newest snackbar; every dismissal plays a quiet slide-fade exit

Accessibility

Live region

aria-live="polite" role="status" aria-atomic="true" on the snackbar stack

Dismiss button

Real <button> with aria-label="Dismiss snackbar" and visible focus ring

Action button

Real <button> carrying its label as aria-label, outlined in the variant's readable ink

Contrast

Title, message, action and close inks meet 4.5:1 and the rail 3:1 on every published system in both themes; state plate glyphs meet 3:1 everywhere, category plate glyphs on all but the systems whose raw category base is lighter than its readable tier

Timer pause

Focus pauses auto-dismiss so content stays readable

Focus indicators

:focus-visible with --ring outline; solid bars switch the outline to their on-fill ink

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Snackbar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the notification is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.