StatusChip

DealDash's sanctioned soft status chip — 10% tint fill, full-strength text, 20% border, mapped to exactly four semantic tokens.

stable feedback #chip#badge#status#dealdash#emerald

Paid

successwarninginfodanger

Loading preview…

Usage

- Deal stages, payment states, sync states — anywhere a row needs a scannable status. - One status map const per page, typed against the domain's status union — not inline conditionals. - Errors are never rendered as empty states: a failed fetch shows a danger treatment with Retry, not "No items yet".

Do / Don't

- **Do** use success=primary — the brand green doubles as the positive signal. - **Do** keep chips at rounded-sm (4px) or full pill — nothing in between. - **Don't** invent a fifth status color; extend the semantic tokens first if the domain truly needs it. - **Don't** fill chips with solid status color — solid fills are for buttons, soft tints are for states.

Tokens

EmeraldButton

A11y

Chip text is the full-strength status color on a 10–15% tint — AA at 12px/500 in both modes (dark mode swaps to lighter hues

Source

src/components/StatusChip.tsx

Live playground