# Badge

A small inline label for status indicators, version tags, or metadata — sits naturally inside a sentence:

This endpoint is <Badge color="green">Stable</Badge>, but this one is still <Badge color="orange">Beta</Badge>.

<Badge color="gray">Gray</Badge> <Badge color="blue">Blue</Badge> <Badge color="green">Green</Badge> <Badge color="yellow">Yellow</Badge> <Badge color="orange">Orange</Badge> <Badge color="red">Red</Badge> <Badge color="purple">Purple</Badge>

<Badge size="xs">xs</Badge> <Badge size="sm">sm</Badge> <Badge size="md">md</Badge> <Badge size="lg">lg</Badge>

<Badge icon="rocket" color="blue" shape="pill">Shipped</Badge> <Badge stroke color="red">Deprecated</Badge> <Badge disabled icon="lock" color="gray">Locked</Badge>

```mdx
This endpoint is <Badge color="green">Stable</Badge>, but this one is still <Badge color="orange">Beta</Badge>.

<Badge icon="rocket" color="blue" shape="pill">Shipped</Badge>
<Badge stroke color="red">Deprecated</Badge>
<Badge disabled icon="lock" color="gray">Locked</Badge>
```

**`Badge` props**

<Parameter name="color" type='"gray" | "blue" | "green" | "yellow" | "orange" | "red" | "purple"' default='"gray"' />

<Parameter name="size" type='"xs" | "sm" | "md" | "lg"' default='"md"' />

<Parameter name="shape" type='"rounded" | "pill"' default='"rounded"' />

<Parameter name="icon" type="string">
  See [Icons](/docs/content/components/icon/#icons).
</Parameter>

<Parameter name="stroke" type="boolean" default="false">
  Outline instead of filled.
</Parameter>

<Parameter name="disabled" type="boolean" default="false">
  Reduced opacity.
</Parameter>