---
name: Badge
menu: Components
route: /components/badge
---

import { Badge } from './src';
import { Playground } from 'docz';

# Badge

The `Badge and [Pill](/components/pill) components are labels with a background color.

## Import

```js
import { Badge } from '@firstclasspostcodes/sw13';
// or
import { Badge } from '@firstclasspostcodes/sw13/lib/components/Badge';
```

## Examples

<>
  {['base', 'black', 'gray', 'blue', 'indigo', 'violet', 'fuschia', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan'].map((color) => (
    <p>This is the <Badge color={color}>{color}</Badge> badge.</p>
  ))}
</>

## Subtle

You can also apply a subtle prop to adjust the hues of the badges:

<Playground>
  <p>This <Badge subtle color="blue">blue</Badge> badge has the subtle prop applied.</p>
</Playground>

## Usage


Operational, available, done, approved, added:

<Badge subtle color="green">success</Badge> <Badge color="green">success</Badge>

Errors, declined, failed, removed, critical:

<Badge subtle color="red">removed</Badge> <Badge color="red">removed</Badge>

In progress, open, modified:

<Badge subtle color="blue">in progress</Badge> <Badge color="blue">in progress</Badge>

Trial, new, information, help:

<Badge subtle color="violet">trial</Badge> <Badge color="violet">trial</Badge>

Busy, blocked, missing, warning:

<Badge subtle color="yellow">moved</Badge> <Badge color="yellow">moved</Badge>

Beta:

<Badge subtle color="gray">beta</Badge> <Badge color="gray">beta</Badge>