Components · Feedback
Toast
Floating, auto-dismissing notifications on a card surface with shadow-md elevation.
Each semantic variant tints only the border and icon — the surface stays neutral.
Preview
Light
Saved
Your changes have been published.
New version available
Refresh to get the latest.
Upload failed
Check your connection and try again.
Dark
Saved
Your changes have been published.
New version available
Refresh to get the latest.
Upload failed
Check your connection and try again.
Accessibility
Saved
Your changes have been published.
New version available
Refresh to get the latest.
Upload failed
Check your connection and try again.
Spec
Values and token references straight from the Zetta spec.
toast
- backgroundColor
- {colors.surface-card}
- textColor
- {colors.ink}
- borderColor
- {colors.hairline}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- shadow
- {shadows.md}
- 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}
Build with the skill
No package to install — hand this to your AI to generate the toast in your stack.
Implement the Zetta "Toast" component in this project's stack using the zetta-design-md skill.
- Apply the `toast` spec from the skill (variants: success, warning, danger, info).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- Card surface, 1px hairline, 8px radius, 16px padding,
shadow-md, max-width 360. Title 14 / 500, body 13 / 400 inmuted. - 8Color is paired with an icon — never the sole signal. Semantic variants change the border + icon only; the surface stays neutral.
- Use
role="alert"for errors androle="status"otherwise; pair with a dismissbutton-icon.
Known gaps
- Stacking order and auto-dismiss timing are not yet specified.