Components · Data display

Badge

Small, non-interactive status labels. Six variants share one geometry — only fill and text color change. Always pair a semantic badge with a text label.

Preview

Light

Neutral Primary Success Warning Danger Info

Dark

Neutral Primary Success Warning Danger Info

Accessibility

Neutral Primary Success Warning Danger Info

Spec

Values and token references straight from the Zetta spec.

badge-neutral

backgroundColor: {colors.surface-muted}
textColor: {colors.badge-neutral-text}
borderColor: {colors.surface-muted}
borderWidth: 1px
borderRadius: {rounded.full}
fontFamily: Geist
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
paddingX: 10px
paddingY: 4px

badge-primary

backgroundColor: {colors.brand}
textColor: {colors.brand-text}
borderColor: {colors.brand}
borderWidth: 1px
borderRadius: {rounded.full}
fontFamily: Geist
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
paddingX: 10px
paddingY: 4px

badge-success

backgroundColor: {colors.success-bg}
textColor: {colors.success-text}
borderColor: {colors.success-bg}
borderWidth: 1px
borderRadius: {rounded.full}
fontFamily: Geist
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
paddingX: 10px
paddingY: 4px

badge-warning

backgroundColor: {colors.warning-bg}
textColor: {colors.warning-text}
borderColor: {colors.warning-bg}
borderWidth: 1px
borderRadius: {rounded.full}
fontFamily: Geist
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
paddingX: 10px
paddingY: 4px

badge-danger

backgroundColor: {colors.danger-bg}
textColor: {colors.danger-text}
borderColor: {colors.danger-bg}
borderWidth: 1px
borderRadius: {rounded.full}
fontFamily: Geist
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
paddingX: 10px
paddingY: 4px

badge-info

backgroundColor: {colors.info-bg}
textColor: {colors.info-text}
borderColor: {colors.info-bg}
borderWidth: 1px
borderRadius: {rounded.full}
fontFamily: Geist
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
paddingX: 10px
paddingY: 4px

Build with the skill

No package to install — hand this to your AI to generate the badge in your stack.

Prompt for your AI

Implement the Zetta "Badge" component in this project's stack using the zetta-design-md skill.

- Apply the `badge` spec from the skill (variants: neutral, primary, 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.

Rules

Full radius, 12 / 400 Geist, 4px × 10px padding. Non-interactive — no hover/focus/active.
8Never rely on color alone. In the Accessibility theme fills collapse to black and a white border appears — the text label is the differentiator.

Known gaps

Leading-icon sizing and a dismissible (×) variant are not yet specified.