---
title: "Snackbar"
url: "https://developer.incode.com/design-and-ux/snackbar/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Snackbar

Snackbars deliver brief, contextual feedback after a user action or system event. They appear at the bottom of the screen, auto-dismiss after a few seconds, and come in four semantic variants: positive, negative, warning, and neutral.

<div class="dh-rule"><span>Variants</span><i></i></div>

<div class="dh-stage" style="flex-direction:column;align-items:stretch;max-width:360px;margin-inline:auto"><span class="dh-pz-snack is-neutral">Your session will expire in 2 minutes</span><span class="dh-pz-snack is-positive">Document captured successfully</span><span class="dh-pz-snack is-warning">Low light detected — find a brighter spot</span><span class="dh-pz-snack is-negative">We couldn’t read your document</span></div>

Four tones map to the snackbar tokens: neutral (brand), positive, warning, and negative — surface and border per tone, text always primary.

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--snackbar-positive-bg | Positive background | Component
--snackbar-negative-bg | Negative background | Component
--snackbar-warning-bg | Warning background | Component
--snackbar-neutral-bg | Neutral background | Component
--snackbar-text | Message text color | Component
--snackbar-icon-positive | Positive indicator color | Component
--radius-snackbar | Corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.