Badges are used to indicate little details:

```jsx
<div className="mb-2">
  <Badge variant="light" className="mr-2">Gray light</Badge>
  <Badge variant="light" size="lg">Gray light</Badge>
</div>
<div className="mb-2">
  <Badge color="green" variant="light" className="mr-2">Green light</Badge>
  <Badge color="green" variant="light" size="lg">Green light</Badge>
</div>
<div className="mb-2">
  <Badge color="red" variant="light" className="mr-2">Red light</Badge>
  <Badge color="red" variant="light" size="lg">Red light</Badge>
</div>
<div className="mb-2">
  <Badge color="blue" variant="light" className="mr-2">Blue light</Badge>
  <Badge color="blue" variant="light" size="lg">Blue light</Badge>
</div>
<div>
  <Badge color="yellow" variant="light" className="mr-2">Yellow light</Badge>
  <Badge color="yellow" variant="light" size="lg">Yellow light</Badge>
</div>
```


These styles are deprecated but still in our application. Please don't add them for new items:

```jsx
<div className="mb-2">
  <Badge className="mr-2">Gray solid</Badge>
  <Badge className="mr-2" variant="outline">Gray outline</Badge>
</div>
<div className="mb-2">
  <Badge color="green" className="mr-2">Green solid</Badge>
  <Badge color="green" className="mr-2" variant="outline">Green outline</Badge>
</div>
<div className="mb-2">
  <Badge color="red" className="mr-2">Red solid</Badge>
  <Badge color="red" className="mr-2" variant="outline">Red outline</Badge>
</div>
<div className="mb-2">
  <Badge color="blue" className="mr-2">Blue solid</Badge>
  <Badge color="blue" className="mr-2" variant="outline">Blue outline</Badge>
</div>
<div>
  <Badge color="yellow" className="mr-2">Yellow solid</Badge>
  <Badge color="yellow" className="mr-2" variant="outline">Yellow outline</Badge>
</div>
```