# Snackbar > A colour-plate snackbar stack — nine variants (success, info, warning, error, pending, mention, schedule, brand and offline), each led by a solid plate in the system's own state or category colour, read verbatim, bleeding a tinted wash into the bar, with outlined actions and a progress rail. - Category: Notification - Frameworks: Vanilla, React + CSS, React + Tailwind - Design system: Tensor - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: snackbar, toast - Page: https://builder.atheros.ai/components/snackbar - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_snackbar/preview-974e1f48efb2.webp ## 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 `