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

​
Basic badge

Badge

​
Colors

Badges support multiple color variants to convey different meanings. Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

​
Sizes

Badges come in four sizes to match your content hierarchy. Badge Badge Badge Badge

​
Shapes

Choose between rounded corners or pill-shaped badges. Badge Badge

​
Icons

Add icons to badges for additional context. Badge Badge Badge

​
Stroke variant

Use the stroke variant for a more subtle appearance. Badge Badge Badge Badge

​
Disabled state

Disable badges to indicate inactive or unavailable states. 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.

​
Combined properties

Combine multiple properties for custom badge styles. Premium Verified Beta

​
Properties

​
color
string
default:"gray"
Badge color variant.Options: gray, blue, green, yellow, 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, 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
  • 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
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.