> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Badge />

> A colored badge of information.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/mIpDpv9JkHHGjpdU/images/badge.png?fit=max&auto=format&n=mIpDpv9JkHHGjpdU&q=85&s=39fc9329cf431224769a0584dc48ada6" data-path="images/badge.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/mIpDpv9JkHHGjpdU/images/badge-dark.png?fit=max&auto=format&n=mIpDpv9JkHHGjpdU&q=85&s=a2e227e784282e7141c0ad0b5d391ce8" data-path="images/badge-dark.png" />

```js theme={"system"}
import {Badge} from "attio/client"
```

## Example

```tsx TypeScript theme={"system"}
import {DescriptionList, Badge} from "attio/client"

export function InformationDialog() {
  return (
    <DescriptionList title="Cryptids of Cornwall">
      <DescriptionList.Item label="Categories" icon="Tag">
        <Badge color="blue">Folklore</Badge>
        <Badge color="amber">Cornwall</Badge>
        <Badge color="lavender">Paranormal</Badge>
      </DescriptionList.Item>
    </DescriptionList>
  )
}
```

## Props

<ParamField path="children" type="React.ReactNode" required>
  The text in the badge.

  Only text is allowed.
</ParamField>

<ParamField path="color" type="'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'lavender' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow'" required>
  The color variant for the badge
</ParamField>