---
title: Badge
description: Inline labels for status, categories, and metadata -- 11 color variants, 4 sizes, icons, pill/rounded shapes, and stroke outlines.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Use the `<Badge>` component to tag content with status indicators, category labels, or version markers. Badges render as compact inline elements, so you can drop them into running text or stack them in a layout.

## Basic Badge

A simple badge with default styling:

<Badge>Default</Badge>

```mdx
<Badge>Default</Badge>
```

## Colors

Badges come in 11 color variants to convey different meanings:

<div className="flex flex-wrap gap-2 my-4">
  <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>
</div>

```mdx
<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>
```

### Surface Colors

For badges that adapt to the page background:

<div className="flex flex-wrap gap-2 my-4">
  <Badge color="white">White</Badge>
  <Badge color="surface">Surface</Badge>
</div>

```mdx
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>
```

### Destructive Colors

For warning or error states:

<div className="flex flex-wrap gap-2 my-4">
  <Badge color="white-destructive">White Destructive</Badge>
  <Badge color="surface-destructive">Surface Destructive</Badge>
</div>

```mdx
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>
```

## With Icons

Add icons to make badges more descriptive:

<div className="flex flex-wrap gap-2 my-4">
  <Badge icon="circle-check" color="green">Verified</Badge>
  <Badge icon="star" color="yellow">Featured</Badge>
  <Badge icon="bolt" color="purple">New</Badge>
  <Badge icon="clock" color="blue">Pending</Badge>
</div>

```mdx
<Badge icon="circle-check" color="green">Verified</Badge>
<Badge icon="star" color="yellow">Featured</Badge>
<Badge icon="bolt" color="purple">New</Badge>
<Badge icon="clock" color="blue">Pending</Badge>
```

### Icon Types

Specify a different icon style using `iconType`:

<div className="flex flex-wrap gap-2 my-4">
  <Badge icon="star" iconType="solid" color="yellow">Solid</Badge>
  <Badge icon="star" iconType="regular" color="yellow">Regular</Badge>
  <Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
  <Badge icon="github" iconType="brands" color="gray">GitHub</Badge>
</div>

```mdx
<Badge icon="star" iconType="solid" color="yellow">Solid</Badge>
<Badge icon="star" iconType="regular" color="yellow">Regular</Badge>
<Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
<Badge icon="github" iconType="brands" color="gray">GitHub</Badge>
```

## Sizes

Four sizes are available to fit different contexts:

<div className="flex flex-wrap items-center gap-2 my-4">
  <Badge size="xs" color="blue">Extra Small</Badge>
  <Badge size="sm" color="blue">Small</Badge>
  <Badge size="md" color="blue">Medium</Badge>
  <Badge size="lg" color="blue">Large</Badge>
</div>

```mdx
<Badge size="xs" color="blue">Extra Small</Badge>
<Badge size="sm" color="blue">Small</Badge>
<Badge size="md" color="blue">Medium</Badge>
<Badge size="lg" color="blue">Large</Badge>
```

## Shapes

Choose between rounded corners or pill shape:

<div className="flex flex-wrap gap-2 my-4">
  <Badge shape="rounded" color="purple">Rounded</Badge>
  <Badge shape="pill" color="purple">Pill</Badge>
</div>

```mdx
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>
```

## Stroke Variant

Use outlined badges for a lighter visual weight:

<div className="flex flex-wrap gap-2 my-4">
  <Badge stroke color="blue">Outlined Blue</Badge>
  <Badge stroke color="green">Outlined Green</Badge>
  <Badge stroke color="red">Outlined Red</Badge>
  <Badge stroke color="purple">Outlined Purple</Badge>
</div>

```mdx
<Badge stroke color="blue">Outlined Blue</Badge>
<Badge stroke color="green">Outlined Green</Badge>
<Badge stroke color="red">Outlined Red</Badge>
<Badge stroke color="purple">Outlined Purple</Badge>
```

## Disabled State

Reduce opacity for inactive badges:

<div className="flex flex-wrap gap-2 my-4">
  <Badge disabled color="gray">Inactive</Badge>
  <Badge disabled color="blue">Disabled</Badge>
</div>

```mdx
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>
```

## Inline Usage

Badges work inline with text. This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription. You can also mark items as <Badge color="green" size="sm">New</Badge> or <Badge color="red" size="sm">Deprecated</Badge>.

```mdx
This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.
You can also mark items as <Badge color="green" size="sm">New</Badge> or
<Badge color="red" size="sm">Deprecated</Badge>.
```

## Props

<ParamField name="color" type="string" default="gray">
  Color variant: `gray`, `blue`, `green`, `yellow`, `orange`, `red`, `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`.
</ParamField>

<ParamField name="size" type="string" default="md">
  Badge size: `xs`, `sm`, `md`, `lg`.
</ParamField>

<ParamField name="shape" type="string" default="rounded">
  Badge shape: `rounded`, `pill`.
</ParamField>

<ParamField name="icon" type="string">
  Font Awesome icon name.
</ParamField>

<ParamField name="iconType" type="string">
  Icon style: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

<ParamField name="stroke" type="boolean" default="false">
  Display as outlined badge with transparent background.
</ParamField>

<ParamField name="disabled" type="boolean" default="false">
  Reduce opacity to indicate inactive state.
</ParamField>

<ParamField name="className" type="string">
  Additional CSS classes for custom styling.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>