Badge

Use the badge component to highlight status indicators, version labels, or metadata inline with customizable colors and hover tooltips.

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

Badge

<Badge>Badge</Badge>

Badges support multiple color variants to convey different meanings.

Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

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

Badges come in four sizes to match your content hierarchy.

Badge Badge Badge Badge

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

Choose between rounded corners or pill-shaped badges.

Badge Badge

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

Add icons to badges for additional context.

Badge Badge Badge

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

Use the stroke variant for a more subtle appearance.

Badge Badge Badge Badge

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

Disable badges to indicate inactive or unavailable states.

Badge Badge

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

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

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

Combine multiple properties for custom badge styles.

Premium Verified Beta

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

• color (string) — Badge color variant.

Options: gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.

• size (string) — Badge size.

Options: xs, sm, md, lg.

• shape (string) — Badge shape.

Options: rounded, pill.

• icon (string) — The icon to display.

Options:

• Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
• Lucide icon name, if you have the icons.library property set to lucide in your docs.json
• Tabler icon name, if you have the icons.library property set to tabler in your docs.json
• 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

For custom SVG icons:

1. Convert your SVG using the SVGR converter.
2. Paste your SVG code into the SVG input field.
3. Copy the complete <svg>...</svg> element from the JSX output field.
4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
5. Adjust height and width as needed.

• iconType (string) — The Font Awesome icon style. Only used with Font Awesome icons.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

• stroke (boolean) — Display badge with an outline instead of filled background.

• disabled (boolean) — Display badge in a disabled state with reduced opacity.

• className (string) — Additional CSS classes to apply to the badge.

• Navigation
• Components overview
• Collect page feedback from users and AI agents