Badge
Compact inline labels for statuses, categories, and counts. Supports variant, size, color, and an optional leading dot.
Variants
Filled
Light
Outline
Dot
Transparent
Default
White
<Badge variant="filled">Filled</Badge>
<Badge variant="light">Light</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="dot">Dot</Badge>
<Badge variant="transparent">Transparent</Badge>
<Badge variant="default">Default</Badge>
<Badge variant="white">White</Badge>Sizes
Extra small
Small
Medium
Large
Extra large
<Badge size="xs">Extra small</Badge>
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
<Badge size="xl">Extra large</Badge>Colors
violet
blue
green
red
orange
teal
cyan
pink
gray
<Badge color="violet">violet</Badge>
<Badge color="blue">blue</Badge>
<Badge color="green">green</Badge>
<Badge color="red">red</Badge>Light variant — colors
violet
blue
green
red
orange
teal
cyan
pink
gray
<Badge variant="light" color="violet">violet</Badge>
<Badge variant="light" color="blue">blue</Badge>
<Badge variant="light" color="green">green</Badge>Dot variant — colors
violet
blue
green
red
orange
teal
cyan
pink
gray
<Badge variant="dot" color="violet">violet</Badge>
<Badge variant="dot" color="blue">blue</Badge>
<Badge variant="dot" color="green">green</Badge>Radius
xs — square
sm
md
lg
xl — pill
<Badge radius="xs">xs — square</Badge>
<Badge radius="sm">sm</Badge>
<Badge radius="md">md</Badge>
<Badge radius="lg">lg</Badge>
<Badge radius="xl">xl — pill</Badge>Sections
🟢Online
Trending↗
Warning
<Badge leftSection="🟢">Online</Badge>
<Badge rightSection="↗">Trending</Badge>
<Badge variant="dot" color="red">Warning</Badge>Full width
Full width badge
<Badge fullWidth>Full width badge</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'filled' | 'light' | 'outline' | 'dot' | 'transparent' | 'default' | 'white' | 'filled' | Visual style variant |
color | string | Primary | Color from the palette or any CSS color |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls height, padding, and font size |
radius | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | 'xl' | Border radius — defaults to pill shape |
fullWidth | boolean | false | Stretch to fill container width |
circle | boolean | false | Force circular shape (equal width/height) |
leftSection | children | — | Content rendered before the label |
rightSection | children | — | Content rendered after the label |
component | string | 'div' | Override root element |