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.
Variants
Your session will expire in 2 minutesDocument captured successfullyLow light detected — find a brighter spotWe couldn’t read your document
Four tones map to the snackbar tokens: neutral (brand), positive, warning, and negative — surface and border per tone, text always primary.
Tokens
TokenRoleLayer
--snackbar-positive-bgPositive backgroundComponent--snackbar-negative-bgNegative backgroundComponent--snackbar-warning-bgWarning backgroundComponent--snackbar-neutral-bgNeutral backgroundComponent--snackbar-textMessage text colorComponent--snackbar-icon-positivePositive indicator colorComponent--radius-snackbarCorner radiusSemanticComponent tokens
The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.