Badge

Badges are small, inline labels used to highlight status, categories, or other metadata. They work well both standalone and inline within text.

Basic Badge

A simple badge with default styling:

Default

<Badge>Default</Badge>

Colors

Badges come in 11 color variants to convey different meanings:

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

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

Destructive Colors

For warning or error states:

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

With Icons

Add icons to make badges more descriptive:

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

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

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

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

Stroke Variant

Use outlined badges for a lighter visual weight:

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

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

Inline Usage

Badges work seamlessly within text. This feature requires a Premium subscription. You can also mark items as New or Deprecated.

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

Properties