Badge

Displays a badge or a component that looks like a badge.

Badge

<Badge>Badge</Badge>

Installation

$ npx shadcn@latest add @constella/badge

Usage

import { Badge, BadgeDot } from "@/components/primitives/badge";

<Badge variant="outline">Badge</Badge>

Composition

Badge└── BadgeDot

Variant

Use the variant prop to change the badge's emphasis. The variants match Button's.

PrimarySecondaryOutlineGhostLink

<Badge variant="primary">Primary</Badge><Badge variant="secondary">Secondary</Badge><Badge variant="outline">Outline</Badge><Badge variant="ghost">Ghost</Badge><Badge variant="link">Link</Badge>

Size

Use the size prop. Pass icons at the size below.

SmallDefaultLarge

Size	Height	Text	Icon
`sm`	18px	12px	12px
`default`	20px	12px	12px
`lg`	24px	13px	14px

<Badge size="lg">  <HugeiconsIcon    data-icon="inline-start"    icon={Tick02Icon}    size={sizes.iconSm}  />  Large</Badge>

Color

Use the color prop to color a badge. Every variant takes it; what it colors depends on the variant. Add BadgeDot for a colored dot.

PaidSyncingPendingFailed

Variant	Colors
`secondary`, `primary`	Background and text, as a tint
`ghost`, `link`	Text
`outline`	Dot, spinner and icons

<Badge color="success">Paid</Badge><Badge color="success" variant="outline">  <BadgeDot />  Paid</Badge>

With Icon

Add data-icon="inline-start" or "inline-end" to an icon or a Spinner, so the badge tightens that side.

VerifiedBookmarkGenerating

<Badge>  <HugeiconsIcon data-icon="inline-start" icon={CheckmarkBadge01Icon} size={sizes.iconXs} />  Verified</Badge><Badge variant="outline">  Bookmark  <HugeiconsIcon data-icon="inline-end" icon={Bookmark01Icon} size={sizes.iconXs} /></Badge><Badge>  Generating  <Spinner data-icon="inline-end" /></Badge>

As Link

Use the render prop to render a link as a badge. Only a link answers hover.

Open Link

<Badge render={<a href="#link" />} variant="outline">  Open Link  <HugeiconsIcon    data-icon="inline-end"    icon={ArrowUpRight01Icon}    size={sizes.iconXs}  /></Badge>

Avatar

Put an Avatar first in the badge, with aria-hidden. Render the badge as a trigger, as in <Badge render={<HoverCardTrigger />}> (Citation does), not the trigger as a badge: the trigger's slot would replace the badge's, and the avatar wouldn't size.

shadcnemilkowalskievilrabbit

<Badge>  <Avatar aria-hidden>    <AvatarImage alt="" src="/avatars/shadcn.png" />    <AvatarFallback>C</AvatarFallback>  </Avatar>  shadcn</Badge>

API Reference

Prop	Type	Default
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`color`	`"success" \| "info" \| "warning" \| "danger"`	-
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "link"`	`"secondary"`
`render`	`ReactElement \| function`	`<span>`
`sx`	`Sx`, applied last	-

BadgeDot takes sx. badgeStyles({ color, size, variant }) returns the badge's styles for another element.