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

# <StatusBadge />

> A component for displaying a status badge with a color.

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

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

`StatusBadge` is a component that displays a status text with an indicator in any hex color or one of the predefined color names.

## Example

```tsx theme={"system"}
import {StatusBadge} from "attio/client"

export function Example({isActive}: {isActive: boolean}) {
  const color = isActive ? "green" : "#FF0000"
  const label = isActive ? "Active" : "Inactive"

  return <StatusBadge color={color}>{label}</StatusBadge>
}
```

## Props

<ParamField path="color" type="StatusIndicatorColor" required>
  The color of the status badge. Can be any hex color (e.g., `"#00D17E"`) or one of the predefined
  colors: `"blue"`, `"violet"`, `"pink"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"cyan"`, or
  `"grey"`.
</ParamField>

<ParamField path="children" type="React.ReactNode" required>
  The text to display in the status badge as a label.
</ParamField>