components
/components/ui/badge.tsx /components/ui/badge.tsx
Badge
Highlight statuses or counts with compact labels
Installation
Usage
Imports
import { Badge, BadgeDot } from "@/components/ui/badge"Code
<Badge variant="strong" color="success">
Active
</Badge>Examples
Badge Color
Badge Variants
Badge Sizes
Badge With Icon
Badge With Dot
Badge With Avatar
Badge With Cross
Badge With Emoji
Badge With Flag
Interactive Badge Example
Rounded Badge
Nested Badge
Props
<Badge>
| Name | Default | Values |
|---|---|---|
| variant | neutral | neutralstrongoutlinesoft |
| size | 24 | 202428 |
| color | primary | primaryinfosuccesswarningdanger |
| dot | false | boolean |
| asChild | false | boolean |