Badge

A badge labels a status or a short fact, like Live, the time left or a number of markets.

Stablebadge.tsxFigma

Passed

Variant

SoftSolid

Tone

NeutralSuccessInfo

Size

MediumSmall

Icon

Show icon

Label

JSX

<Badge variant="secondary" tone="success"><IconCheck />Passed</Badge>

When to use

• To show the state of something, like Live, Verified or Closed.
• To add a short fact to a row or card, like Market or 3 markets.

When not to use

• If it runs an action, use a button.
• If it filters a list, use chips or a segmented control.
• If it shows a price going up or down, use positive or negative text next to the number.

Anatomy

Verified

1. 1ContainerThe pill shape. Soft or Solid, coloured by the tone.
2. 2IconOptional16px, in the tone's icon colour.
3. 3LabelOne or two words, in semibold.

Variants and tones

NeutralSuccessInfo

Soft

NeutralSuccessInfo

Solid

• Soft (secondary) is for most labels, like Live on a market card or Verified next to an account. Its default tone is neutral.
• Solid (default) is for a badge that has to stand out on a busy row, like the one status that matters in a list. Its default tone is success.

Choose the tone by what the badge means, not by the colour you want.

• Success is for good or active states, like Live, Verified or Oversubscribed.
• Info is for neutral facts that need a little attention, like Upcoming or Requirements.
• Neutral is for plain labels and finished states, like Closed, Market or Limit.

LiveClosed

DoThe tone matches the meaning. Success for live, neutral for closed.

+12.4%

Don'tA badge for a price change. Show it as positive or negative text next to the number.

Sizes

PassedMedium, 24px

PassedSmall, 20px

• Medium (24px) is the default.
• Small (20px) fits dense rows, tables and cards.

Content

• Keep it to one or two words, in sentence case, with no full stop.
• An icon before the label makes it quicker to read, like a check for Verified. Icons are 16px and use the tone’s icon colour. A badge has one icon at most.

Upcoming

DoOne or two words you can read at a glance.

Opens for bids on Friday at noon

Don'tA whole sentence in a badge. Put the details in the text next to it.

Behaviour

Badges can’t be clicked or focused. If people need to act on one, put a button next to it.

Accessibility

• The words carry the meaning, so don’t rely on colour alone. Live and Closed have to say so in text.
• Icons inside a badge are decorative, because the label already says what they mean.

Props

Prop	Type	Default	Notes
variant	"secondary" | "default"	"default"	secondary is Soft, default is Solid.
tone	"success" | "info" | "neutral"	neutral for Soft, success for Solid	Choose by meaning, not colour.
size	"md" | "sm"	"md"	24px or 20px.
asChild	boolean	false	Gives the child the badge’s styles.

Every other <span> prop passes through.

Related

• Use a Button when the label needs to do something.