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 https://reui.io/r/badge.json
Examples
Light
Loading
Outline
Loading
Circle
Loading
With Dot
Loading
With Icon
Loading
Remove Button
Loading
Square
Loading
Size
Loading
asChild
Loading
Disabled
Loading
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.