Skip to main content
Use badges to display status indicators, labels, or metadata. Badges can be used inline within text or as standalone elements.

​
Basic badge

Badge 
<Badge>Badge</Badge>

​
Colors

Badges support multiple color variants to convey different meanings. 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="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. Badge Badge Badge Badge 
<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. Badge Badge 
<Badge shape="rounded">Badge</Badge>
<Badge shape="pill">Badge</Badge>

​
Icons

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>

​
Stroke variant

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>

​
Disabled state

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>

​
Inline usage

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.

​
Combined properties

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>

​
Properties

​
color
string
default:"gray"
Badge color variant.Options: gray, blue, green, orange, red, purple, white, surface, white-destructive, surface-destructive.
​
size
string
default:"md"
Badge size.Options: xs, sm, md, lg.
​
shape
string
default:"rounded"
Badge shape.Options: rounded, pill.
​
icon
string
The icon to display.Options:
  • Font Awesome icon name
  • Lucide icon name
  • JSX-compatible SVG code wrapped in curly braces
  • URL to an externally hosted icon
  • Path to an icon file in your project
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
default:"false"
Display badge with an outline instead of filled background.
​
disabled
boolean
default:"false"
Display badge in a disabled state with reduced opacity.
​
className
string
Additional CSS classes to apply to the badge.