Components · Feedback
Alert
Inline, persistent messages. Each semantic variant pairs a color with an icon, so meaning survives the Accessibility theme where semantic colors collapse to black and white.
Preview
Light
Heads up
A new version of the design system is available.
Saved
Your changes have been published.
Review needed
Two fields are missing required values.
Couldn't save
The server rejected the request. Try again.
Dark
Heads up
A new version of the design system is available.
Saved
Your changes have been published.
Review needed
Two fields are missing required values.
Couldn't save
The server rejected the request. Try again.
Accessibility
Heads up
A new version of the design system is available.
Saved
Your changes have been published.
Review needed
Two fields are missing required values.
Couldn't save
The server rejected the request. Try again.
Spec
Values and token references straight from the Zetta spec (the base alert geometry plus each semantic variant).
alert
- textColor
- {colors.ink}
- borderWidth
- 1px
- borderRadius
- {rounded.base}
- iconSize
- 20px
- padding
- {spacing.md}
- gap
- 12px
- titleFontSize
- 14px
- titleFontWeight
- 500
- bodyFontSize
- 13px
- bodyFontWeight
- 400
alert-neutral
- backgroundColor
- {colors.surface-secondary}
- borderColor
- {colors.hairline}
- iconColor
- {colors.muted}
alert-success
- backgroundColor
- {colors.success-bg}
- borderColor
- {colors.success}
- iconColor
- {colors.success-text}
alert-warning
- backgroundColor
- {colors.warning-bg}
- borderColor
- {colors.warning}
- iconColor
- {colors.warning-text}
alert-danger
- backgroundColor
- {colors.danger-bg}
- borderColor
- {colors.danger}
- iconColor
- {colors.danger-text}
alert-info
- backgroundColor
- {colors.info-bg}
- borderColor
- {colors.info}
- iconColor
- {colors.info-text}
Build with the skill
No package to install — hand this to your AI to generate the alert in your stack.
Implement the Zetta "Alert" component in this project's stack using the zetta-design-md skill.
- Apply the `alert` spec from the skill (variants: neutral, 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
- 16px padding, 12px gap, 20px icon, 8px radius. Title 14 / 500, body 13 / 400.
- 8Color is always paired with an icon + label — never the sole signal.
- Use
role="alert"for errors (assertive) androle="status"for the rest.
Known gaps
- Dismissible alert and an inline action-button slot are not yet specified.