Badge
Highlight important information, like a new feature or a notification.
Badge
Badge
Badge
Usage
import { Badge } from "#/ui/components/Badge"<Badge>Badge</Badge>Variants
Each badge has 3 different variants to choose between
Pill
Rounded
Square
<Badge
variant="pill" // or "rounded" or "square"
color="info"
>
Pill
</Badge>Size
Each badge has 3 different size options to choose between
sm
md
lg
<Badge
size="sm" // or "md" or "lg"
color="info"
>
sm
</Badge>Color
Random
By default, badges will randomly select a color from the color options
<Badge
color="random" // or don't pass a color prop
>
Random
</Badge>Palette
You can specify any color from the tailwind color palette
<Badge
color="amber" // or any tailwind color name
>
Palette
</Badge>Context
You can also specify a color based on its context
<Badge
color="info" // or "success" or "warning" or "danger"
>
Context
</Badge>Transparent
You can pass the transparent prop to remove the badge background color, while leaving the highlight colors
Info
Success
Warning
Danger
<Badge
color="info" // any color from above
transparent
>
Transparent
</Badge>Dot
You can pass the dot prop to add a dot to your badge
Info
Success
Warning
Danger
<Badge color="info" dot>
Dot
</Badge>Image
You can pass an image object to add an image to your badge (this will disable the dot)
Info
Success
Warning
Danger
<Badge
color="info"
image={{
src: "https://a.storyblok.com/f/180053/1200x1600/bbce43daaf/dan-spratling-profile-picture.jpg",
alt: "Dan Spratling",
}}
>
Info
</Badge>Icons
You can pass an icon as a child to add an icon to your badge
Info
Info
Warning
Danger
<Badge color="warning">
<AlertTriangleIcon /> Warning
</Badge>Interactivity
By default, badges are not interactive but you can pass a prop with interactivity if you need it (don’t forget to style it)
Remove
<Badge color="info">
Remove
<button
onClick={() => alert("Clicked")} // or whatever functionality you need
className="-mx-1 inline-flex items-center justify-center rounded hover:bg-black/10 focus:bg-black/10 size-5"
>
<XCloseIcon className="size-4" />
<span className="sr-only">Close Example</span>
</button>
</Badge>Customization
Classes
You can customize badges further by passing a className prop, which will override any styles already set.
Destructive
<Badge className="bg-slate-200 border-x-0 text-slate-800 border-slate-200 border-b-2 rounded-none border-b-slate-800">
Destructive
</Badge>