Badge

Updated 2 months ago

Live preview

neutral

primary

positive

caution

critical

Components

5 variants Tokens-backed WCAG 2.2 AAA target

A small, inline status indicator. Carries a short label and a tone — five tones cover the canonical state patterns.

Rendered from components/badge/recipe.json

When to use Badge

Use a badge to mark a record's state inline — Active, Draft, Archived, Pending review. Five tones cover the canonical state patterns.

Variant	Use for
Neutral	Default state, no urgency
Primary	Active, in-progress
Positive	Completed, verified, approved
Caution	Needs attention, expiring soon
Critical	Failed, expired, requires action

A badge is decorative — wrap with screen-reader-friendly context when the badge IS the only signal of state.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.