The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A small component used to highlight status, labels, or counts.
Import the Badge component from @bun-ui/react:
import { Badge } from "@bun-ui/react"The Badge component supports different colors to indicate various states or categories.
The Badge component comes in three sizes to fit different contexts.
The Badge component can be customized using the className prop or by extending its styles with your design system.
<Badge className="bg-gradient-to-r from-purple-500 to-pink-500">
Custom Badge
</Badge>| Prop | Type | Default | Description |
|---|---|---|---|
color | "primary" | "secondary" | "destructive" | "accent" | "neutral" | "primary" | Color variant of the badge. |
size | "sm" | "md" | "lg" | "md" | Size of the badge. |
variant | "filled" | "outlined" | "filled" | Variant of the badge. |