DefaultSecondaryDestructiveOutlineGhostLink
Installation
pnpm dlx shadcn@latest add @cortexcn/badgeUsage
import { Badge, badgeVariants } from "@/components/badge";Examples
Variants
DefaultSecondaryDestructiveOutlineGhostLink
import { Badge } from "@/components/badge"export function BadgeVariants() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap gap-2 style-sera:gap-6"> <Badge>Default</Badge> <Badge variant="secondary">Secondary</Badge> <Badge variant="destructive">Destructive</Badge> <Badge variant="outline">Outline</Badge> <Badge variant="ghost">Ghost</Badge> <Badge variant="link">Link</Badge> </div> </div> )}Icon left
DefaultSecondaryDestructiveOutlineGhostLink
import { Badge } from "@/components/badge"import { BadgeCheck } from "lucide-react"export function BadgeWithIconLeft() { return ( <div className="flex flex-col gap-6 max-w-fit"> <div className="flex flex-wrap gap-2 style-sera:gap-6"> <Badge> <BadgeCheck data-icon="inline-start" /> Default </Badge> <Badge variant="secondary"> <BadgeCheck data-icon="inline-start" /> Secondary </Badge> <Badge variant="destructive"> <BadgeCheck data-icon="inline-start" /> Destructive </Badge> <Badge variant="outline"> <BadgeCheck data-icon="inline-start" /> Outline </Badge> <Badge variant="ghost"> <BadgeCheck data-icon="inline-start" /> Ghost </Badge> <Badge variant="link"> <BadgeCheck data-icon="inline-start" /> Link </Badge> </div> </div> )}Icon right
DefaultSecondaryDestructiveOutlineGhostLink
import { Badge } from "@/components/badge"import { ArrowRightIcon } from "lucide-react"export function BadgeWithIconRight() { return ( <div className="flex flex-col gap-6 max-w-fit"> <div className="flex flex-wrap gap-2 style-sera:gap-6"> <Badge> Default <ArrowRightIcon data-icon="inline-end" /> </Badge> <Badge variant="secondary"> Secondary <ArrowRightIcon data-icon="inline-end" /> </Badge> <Badge variant="destructive"> Destructive <ArrowRightIcon data-icon="inline-end" /> </Badge> <Badge variant="outline"> Outline <ArrowRightIcon data-icon="inline-end" /> </Badge> <Badge variant="ghost"> Ghost <ArrowRightIcon data-icon="inline-end" /> </Badge> <Badge variant="link"> Link <ArrowRightIcon data-icon="inline-end" /> </Badge> </div> </div> )}With spinner
DefaultSecondaryDestructiveOutlineGhostLink
import { Badge } from "@/components/badge"import { Spinner } from "@/components/spinner"export function BadgeWithSpinner() { return ( <div className="flex flex-col gap-6 max-w-fit"> <div className="flex flex-wrap gap-2 style-sera:gap-6"> <Badge> <Spinner data-icon="inline-start" /> Default </Badge> <Badge variant="secondary"> <Spinner data-icon="inline-start" /> Secondary </Badge> <Badge variant="destructive"> <Spinner data-icon="inline-start" /> Destructive </Badge> <Badge variant="outline"> <Spinner data-icon="inline-start" /> Outline </Badge> <Badge variant="ghost"> <Spinner data-icon="inline-start" /> Ghost </Badge> <Badge variant="link"> <Spinner data-icon="inline-start" /> Link </Badge> </div> </div> )}asChild
import { Badge } from "@/components/badge"import { ArrowUpRightIcon } from "lucide-react"export function BadgeAsLink() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap gap-2 style-sera:gap-6"> <Badge asChild> <a href="#"> Link{" "} <ArrowUpRightIcon data-icon="inline-end" /> </a> </Badge> <Badge asChild variant="secondary"> <a href="#"> Link{" "} <ArrowUpRightIcon data-icon="inline-end" /> </a> </Badge> <Badge asChild variant="destructive"> <a href="#"> Link{" "} <ArrowUpRightIcon data-icon="inline-end" /> </a> </Badge> <Badge asChild variant="outline"> <a href="#"> Link{" "} <ArrowUpRightIcon data-icon="inline-end" /> </a> </Badge> <Badge asChild variant="ghost"> <a href="#"> Link{" "} <ArrowUpRightIcon data-icon="inline-end" /> </a> </Badge> <Badge asChild variant="link"> <a href="#"> Link{" "} <ArrowUpRightIcon data-icon="inline-end" /> </a> </Badge> </div> </div> )}Long text
A badge with a lot of text to see how it wraps
import { Badge } from "@/components/badge"export function BadgeLongText() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap gap-2 style-sera:gap-6"> <Badge variant="secondary"> A badge with a lot of text to see how it wraps </Badge> </div> </div> )}Custom colors
BlueGreenSkyPurpleBlueGreenSkyPurpleRed
import { Badge } from "@/components/badge"export function BadgeCustomColors() { return ( <div className="flex flex-col gap-6 max-w-fit"> <div className="flex flex-wrap gap-2 style-sera:gap-6"> <Badge className="bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50"> Blue </Badge> <Badge className="bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50"> Green </Badge> <Badge className="bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50"> Sky </Badge> <Badge className="bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50"> Purple </Badge> <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300"> Blue </Badge> <Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300"> Green </Badge> <Badge className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300"> Sky </Badge> <Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300"> Purple </Badge> <Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300"> Red </Badge> </div> </div> )}Adapted from the shadcn/ui Badge (MIT).