Badge | Lime design system

Examples

Beside a title

Current

Bills

With an icon

Settled$20 back

When to use it

Use: A state next to a title or in a table cell: Paid, Failed.
Use: A plan or a count: Plus, 3.
Use: A single highlight, such as New.
Not for: The person presses it to filter or toggle. Use Chip.
Not for: It is a dot and a word for work in progress with a retry. Use Status.
Not for: It needs a sentence. Use text beside the item.

8 rules

Must: Keep the word on a status badge; the tone repeats the state and never carries it alone. Because the tone is only a tint, so an empty danger badge is a red pill a screen reader skips.
Never: Add onClick to a Badge; use a Chip or Button. Because it is a span with no focus or role, so a keyboard never reaches it.
Should: Use accent for at most one kind of badge, such as New, never for every row.
Should: Place a badge right after the item's title or in its own table column, not at a corner.
Must: Write badges in sentence case, never capitals. Because capitals widen a pill that never wraps, and some screen readers spell short capitals letter by letter.
Should: Keep a badge under about 14 characters; it never wraps or truncates.
Should: Leave the 12px icon before the word decorative; do not give it a label.
Must: Render no badge when there is no text, such as a count of zero. Because an empty Badge still draws a 24px pill with its padding, a blank lozenge in the row.

3 checks

: A span read as text in order, such as "Vacation fund, Paid"; not focusable.
: Color never carries a state alone; every status tone has a word.
: Contrast on the tint: success 5.4:1, warning 5.8:1, danger 5.7:1.

5 edge cases

Long text: Never wraps or truncates; a long pill overflows a narrow cell.
Row of badges in 160px: Badges are shrink-0 and overflow. Use flex-wrap.
Right to left: Padding is symmetric; an icon placed first moves to the right edge.
Zoom 200%: The pill widens and keeps its 24px height.
Forced colors: Tints drop but the word still reads; only outline keeps an edge.

3 props

variant: 'neutral' | 'accent' | 'outline' | 'success' | 'warn' | 'danger' default 'neutral'
children: ReactNode
className: string

14 tokens