Status badge

A compact label for state. Presentational and SSR-safe — render it server-side with no hydration. statusToIntent() centralizes the work-item status → color mapping so the inbox’s hardcoded status classes can migrate onto tokens.

Live

neutralaccentinfosuccesswarningerror

newin progressawaiting reviewsubmittederrorarchived

The first row is the six intents; the second maps real work-item statuses through statusToIntent().

Usage

import StatusBadge, { statusToIntent } from '@repo/ui/StatusBadge';

<StatusBadge intent="success">Submitted</StatusBadge>
<StatusBadge intent={statusToIntent(item.status)} size="sm" dot>{item.status}</StatusBadge>

Props

Prop	Type	Default	Notes
intent	neutral | accent | info | success | warning | error	neutral	Soft bg + strong fg
size	sm | md	md	sm renders a compact 10px pill for dense surfaces
dot	boolean	false	Leading status dot
className	string	—	Merged via tailwind-merge

statusToIntent(status) maps new → info, in_progress/awaiting_review → warning, submitted/processed → success, error → error, archived and everything else → neutral.

Do / don’t

• Do use accent (orange) for at most one brand moment; statuses are system colors.
• Don’t invent new colors — extend statusToIntent instead.
• Don’t rely on color alone; the text label carries the meaning.

Accessibility

• Text label is the source of truth; the dot is decorative. Verified with jest-axe.