Zetta v1.6

Components · Data display & feedback

Toast

Ephemeral notification for background events and completed actions. Split from zetta-feedback-v1_4.md (removed in v1.5) in v1.4.

Preview

Saved
Your changes have been published.
New version available
Refresh to get the latest.

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Toast" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `toast` spec and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `toast` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

                    ┌──────────────────────────────────────┐
                    │ [✓]  File uploaded successfully       │
                    │      report-q3.pdf · 2.4 MB  [Undo]  │
                    └──────────────────────────────────────┘
                              ↑ bottom-right, z-index: toast
State Visual
Entering Slides up from bottom + fade in
Visible Fully shown, countdown timer running
Hovering Auto-dismiss paused while cursor is over toast
Closing Fade out + slide down, {motion.duration-base}
Dismissed (manual) Removed from DOM on dismiss button click

When to use

  • Confirmation of a user action: "Changes saved.", "Item deleted."
  • Background event notification: "Export ready — click to download."
  • Non-blocking errors that don't prevent the user from continuing.

When not to use

  • Critical errors requiring immediate action — use Modal or Alert.
  • Persistent information — use Alert.
  • Field validation — use Field error state.

Do

  • Keep toasts concise — title only if possible. Body text is optional.
  • Pause auto-dismiss on hover.
  • Offer Undo for destructive actions (delete, archive) via the action slot.
  • Stack up to 3 toasts — oldest at the bottom, newest at the top.

Don't

  • Don't use toasts for errors that require the user to take action before continuing.
  • Don't show more than 3 toasts simultaneously.
  • Don't use auto-dismiss durations under 4 seconds — users may not have time to read.
  • Title: past tense, short. "Changes saved." "File deleted." "Export complete."
  • Body: optional detail. One sentence max. "report-q3.pdf has been removed."
  • Action label: short verb. "Undo", "View", "Download".
  • Dismiss aria-label: "Dismiss notification".

Keyboard

Key Behavior
Tab Move focus to toast action or dismiss button
Enter / Space Activate focused button
Escape Dismiss all visible toasts

Accessibility

  • role="status" (polite) for success and info toasts.
  • role="alert" (assertive) for danger and warning toasts.
  • aria-live="polite" on the toast container region.
  • Auto-dismiss must be pausable — WCAG 2.2.2 requires users can pause or extend time limits.
  • Dismiss button: aria-label="Dismiss notification".
  • Position: z-index: {elevation.z-index.flag} (600) — above modals.

Spec

Values and token references resolved straight from the Zetta spec.

toast
backgroundColor
{colors.surface-card}
textColor
{colors.ink}
borderColor
{colors.hairline}
borderWidth
1px
borderRadius
{rounded.base}
shadow
{elevation.shadow.overlay}
padding
{spacing.md}
gap
12px
titleFontSize
14px
titleFontWeight
500
bodyFontSize
13px
bodyFontWeight
400
bodyColor
{colors.muted}
maxWidth
360px
toast-success
iconColor
{colors.success-text}
borderColor
{colors.success}
toast-warning
iconColor
{colors.warning-text}
borderColor
{colors.warning}
toast-danger
iconColor
{colors.danger-text}
borderColor
{colors.danger}
toast-info
iconColor
{colors.info-text}
borderColor
{colors.info}