# Badge

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

## 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](/components/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

## Variants and tones

- **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*.

## Sizes

- **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.

## 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](/components/button/) when the label needs to do something.