neutral

Draft

primary

Active

positive

Verified

caution

Expiring

critical

Failed

ARIA notes

Badge is decorative status; the surrounding context provides meaning. If the badge IS the only signal of state, wrap with a screen-reader-friendly element: <span class='sr-only'>Status: </span><span class='ps-badge'>active</span>.

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.