## Documentation Index

Fetch the complete documentation index at: [/docs/llms.txt](/content/docs/llms.txt)

Use this file to discover all available pages before exploring further.

Use badges to display status indicators, labels, or metadata. Place badges inline within text or as standalone elements.

## Basic badge

Badge

```jsx
<Badge>Badge</Badge>
```

## Colors

Badges support multiple color variants to convey different meanings.

```jsx
<Badge color="gray">Badge</Badge>
<Badge color="blue">Badge</Badge>
<Badge color="green">Badge</Badge>
<Badge color="yellow">Badge</Badge>
<Badge color="orange">Badge</Badge>
<Badge color="red">Badge</Badge>
<Badge color="purple">Badge</Badge>
<Badge color="white">Badge</Badge>
<Badge color="surface">Badge</Badge>
<Badge color="white-destructive">Badge</Badge>
<Badge color="surface-destructive">Badge</Badge>
```

## Sizes

Badges come in four sizes to match your content hierarchy.

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

## Shapes

Choose between rounded corners or pill-shaped badges.

```jsx
<Badge shape="rounded">Badge</Badge>
<Badge shape="pill">Badge</Badge>
```

## Icons

Add icons to badges for additional context.

```jsx
<Badge icon="circle-check" color="green">Badge</Badge>
<Badge icon="clock" color="orange">Badge</Badge>
<Badge icon="ban" color="red">Badge</Badge>
```

## Stroke variant

Use the stroke variant for a more subtle appearance.

```jsx
<Badge stroke color="blue">Badge</Badge>
<Badge stroke color="green">Badge</Badge>
<Badge stroke color="orange">Badge</Badge>
<Badge stroke color="red">Badge</Badge>
```

## Disabled state

Disable badges to indicate inactive or unavailable states.

```jsx
<Badge disabled icon="lock" color="gray">Badge</Badge>
<Badge disabled icon="lock" color="blue">Badge</Badge>
```

## Inline usage

Badges work naturally within text content. For example, this feature requires a Premium subscription, or this API endpoint returns JSON format.

```jsx
This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.
```

## Combined properties

Combine multiple properties for custom badge styles.

```jsx
<Badge icon="star" color="blue" size="lg" shape="pill">Premium</Badge>
<Badge icon="check" stroke color="green" size="sm">Verified</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">Beta</Badge>
```

## Properties

**color**  
Type: string  
Default: "gray"  
Badge color variant. Options: `gray`, `blue`, `green`, `yellow`, `orange`, `red`, `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`.

**size**  
Type: string  
Default: "md"  
Badge size. Options: `xs`, `sm`, `md`, `lg`.

**shape**  
Type: string  
Default: "rounded"  
Badge shape. Options: `rounded`, `pill`.

**icon**  
Type: string  
The icon to display. Options:  
- [Font Awesome](https://fontawesome.com/icons) icon name,  
- [Lucide](https://lucide.dev/icons) icon name,  
- [Tabler](https://tabler.io/icons) icon name,  
- A single emoji (for example, `💡` or `🚀`),  
- URL to an externally hosted icon,  
- Path to an icon file in your project,  
- SVG code wrapped in curly braces.

**iconType**  
Type: string  
The [Font Awesome](https://fontawesome.com/icons) icon style. Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.

**stroke**  
Type: boolean  
Default: "false"  
Display badge with an outline instead of filled background.

**disabled**  
Type: boolean  
Default: "false"  
Display badge in a disabled state with reduced opacity.

**className**  
Type: string  
Additional CSS classes to apply to the badge.