Components

Badge

Inline labels for status, versions, and metadata.

Use Badge inside text or as a standalone status label.

Basic usage#

Badge

<Badge>Badge</Badge>

Colors#

Gray Blue Green Yellow Orange Red Purple White Surface White destructive Surface destructive

<Badge color="blue">Blue</Badge>
<Badge color="green">Green</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="red">Red</Badge>

Sizes#

Extra small Small Medium Large

<Badge size="xs">Extra small</Badge>
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Shapes#

Rounded Pill

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

Icons#

Named icons use the Lucide icon registry. You can also pass an image URL, a local image path, or a rendered React node.

Verified Pending Blocked

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

Stroke and disabled states#

Stroke Disabled

<Badge stroke color="blue">Stroke</Badge>
<Badge disabled icon="lock">Disabled</Badge>

Combined properties#

Premium Verified Beta

Properties#

Name	Type	Description
color	'gray' \| 'blue' \| 'green' \| 'yellow' \| 'orange' \| 'red' \| 'purple' \| 'white' \| 'surface' \| 'white-destructive' \| 'surface-destructive'	Color treatment. Default: gray
size	'xs' \| 'sm' \| 'md' \| 'lg'	Badge size. Default: md
shape	'rounded' \| 'pill'	Corner shape. Default: rounded
icon	string \| ReactNode	Lucide icon name, image source, or rendered icon.
stroke	boolean	Uses an outline instead of a filled background. Default: false
disabled	boolean	Reduces emphasis and exposes the disabled state to assistive technology. Default: false
className	string	Additional classes applied to the badge.
children	ReactNode	Badge label.

Last updated on Aug 8, 2026

Accordion Callout