Components
Badge
A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.
Loading
Installation
pnpm dlx shadcn@latest add @toui/badge
Examples
Light
Loading
Outline
Loading
Circle
Loading
Shapes
Loading
With Dot
Loading
With Icon
Loading
Remove Button
Loading
Square
Loading
Themes
Loading
Sizes
Loading
asChild
Loading
Disabled
Loading
Pattern
Tokens
19 CSS variables in 7 categories.
height
| CSS Variable | Value | Description |
|---|---|---|
--badge-height-sm | calc(var(--spacing) * 4.5) | 1.125rem — 18px |
--badge-height-md | calc(var(--spacing) * 5) | 1.25rem — 20px |
--badge-height-lg | calc(var(--spacing) * 6) | 1.5rem — 24px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--badge-radius | var(--component-radius-sm) | calc(var(--radius) - 2px) |
px
| CSS Variable | Value | Description |
|---|---|---|
--badge-px-sm | var(--component-px-xs) | 0.5rem — px-2 |
--badge-px-md | var(--component-px-sm) | 0.75rem — px-3 |
--badge-px-lg | var(--component-px-md) | 1rem — px-4 |
gap
| CSS Variable | Value | Description |
|---|---|---|
--badge-gap-sm | var(--component-gap-xs) | — |
--badge-gap-md | var(--component-gap-xs) | — |
--badge-gap-lg | var(--component-gap-sm) | — |
text
| CSS Variable | Value | Description |
|---|---|---|
--badge-text-sm | calc(var(--spacing) * 3) | 0.75rem — 12px — für 18px Badge |
--badge-text-md | calc(var(--spacing) * 3) | 0.75rem — 12px — für 20px Badge |
--badge-text-lg | calc(var(--spacing) * 3.5) | 0.875rem — 14px — für 24px Badge |
icon
| CSS Variable | Value | Description |
|---|---|---|
--badge-icon-sm | calc(var(--spacing) * 3) | 0.75rem — 12px |
--badge-icon-md | calc(var(--spacing) * 3.5) | 0.875rem — 14px |
--badge-icon-lg | calc(var(--spacing) * 3.5) | 0.875rem — 14px |
min-width
| CSS Variable | Value | Description |
|---|---|---|
--badge-min-width-sm | calc(var(--spacing) * 5) | 1.25rem |
--badge-min-width-md | calc(var(--spacing) * 6) | 1.5rem |
--badge-min-width-lg | calc(var(--spacing) * 7) | 1.75rem |
API Reference
This component provides a customizable badge system with flexible variants, sizes, and appearances.
Badge
| Prop | Type | Default |
|---|---|---|
variant | secondary | |
appearance | default | |
size | md | |
shape | default | |
disabled | false | |
asChild | false | |
className |
BadgeButton
| Prop | Type | Default |
|---|---|---|
variant | default | |
asChild | false | |
className |
BadgeDot
| Prop | Type | Default |
|---|---|---|
className |
Credits
- Built with Radix UI Slot.