Badge

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

Kobalte

The Badge component is built on top of Kobalte Badge, which provides the accessible badge primitive.

BadgeSecondaryDestructiveOutline

1
import { Badge } from "~/components/ui/badge";
2

3
export default function BadgeDemo() {
4
  return (
5
    <div class="flex w-full flex-wrap justify-center gap-2">
6
      <Badge>Badge</Badge>
7
      <Badge variant="secondary">Secondary</Badge>
8
      <Badge variant="destructive">Destructive</Badge>
9
      <Badge variant="outline">Outline</Badge>
10
    </div>
11
  );
12
}

Installation

pnpm dlx shadcn@latest add @zaidan/badge
npx shadcn@latest add @zaidan/badge
yarn dlx shadcn@latest add @zaidan/badge
bunx --bun shadcn@latest add @zaidan/badge

Usage

1
import { Badge } from "~/components/ui/badge";

1
<Badge variant="default | outline | secondary | destructive">Badge</Badge>

Variants

Use the variant prop to change the variant of the badge.

DefaultSecondaryDestructiveOutlineGhost

1
import { Badge } from "~/components/ui/badge";
2

3
export default function BadgeVariants() {
4
  return (
5
    <div class="flex flex-wrap gap-2">
6
      <Badge>Default</Badge>
7
      <Badge variant="secondary">Secondary</Badge>
8
      <Badge variant="destructive">Destructive</Badge>
9
      <Badge variant="outline">Outline</Badge>
10
      <Badge variant="ghost">Ghost</Badge>
11
    </div>
12
  );
13
}

Each semantic color ships in two treatments. *-light fills the badge with a tinted surface, and *-outline keeps the badge on the page background with only the border and the label carrying the color. Both read against the same --primary, --destructive, --success, --warning and --info tokens, so they follow the active theme.

PrimaryDestructiveSuccessWarningInfo

1
import { Badge } from "~/components/ui/badge";
2

3
export default function BadgeStatus() {
4
  return (
5
    <div class="flex flex-col gap-3">
6
      <div class="flex flex-wrap gap-2">
7
        <Badge variant="primary-light">Primary</Badge>
8
        <Badge variant="destructive-light">Destructive</Badge>
9
        <Badge variant="success-light">Success</Badge>
10
        <Badge variant="warning-light">Warning</Badge>
11
        <Badge variant="info-light">Info</Badge>
12
      </div>
13
      <div class="flex flex-wrap gap-2">
14
        <Badge variant="primary-outline">Primary</Badge>
15
        <Badge variant="destructive-outline">Destructive</Badge>
16
        <Badge variant="success-outline">Success</Badge>
17
        <Badge variant="warning-outline">Warning</Badge>
18
        <Badge variant="info-outline">Info</Badge>
19
      </div>
20
    </div>
21
  );
22
}

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

VerifiedBookmark

1
import { BadgeCheck, BookmarkIcon } from "lucide-solid";
2
import { Badge } from "~/components/ui/badge";
3

4
export default function BadgeIcon() {
5
  return (
6
    <div class="flex flex-wrap gap-2">
7
      <Badge variant="secondary">
8
        <BadgeCheck data-icon="inline-start" />
9
        Verified
10
      </Badge>
11
      <Badge variant="outline">
12
        Bookmark
13
        <BookmarkIcon data-icon="inline-end" />
14
      </Badge>
15
    </div>
16
  );
17
}

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.

DeletingGenerating

1
import { Badge } from "~/components/ui/badge";
2
import { Spinner } from "~/components/ui/spinner";
3

4
export default function BadgeSpinner() {
5
  return (
6
    <div class="flex flex-wrap gap-2">
7
      <Badge variant="destructive">
8
        <Spinner data-icon="inline-start" />
9
        Deleting
10
      </Badge>
11
      <Badge variant="secondary">
12
        Generating
13
        <Spinner data-icon="inline-end" />
14
      </Badge>
15
    </div>
16
  );
17
}

Link

Use the as prop to render a link as a badge.

Open Link

1
/** biome-ignore-all lint/a11y/useValidAnchor: <example file> */
2
import { ArrowUpRightIcon } from "lucide-solid";
3
import { Badge } from "~/components/ui/badge";
4

5
export default function BadgeLink() {
6
  return (
7
    <Badge as="a" href="#link">
8
      Open Link <ArrowUpRightIcon data-icon="inline-end" />
9
    </Badge>
10
  );
11
}

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

BlueGreenSkyPurpleRed

1
import { Badge } from "~/components/ui/badge";
2

3
export default function BadgeColors() {
4
  return (
5
    <div class="flex flex-wrap gap-2">
6
      <Badge class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">Blue</Badge>
7
      <Badge class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">Green</Badge>
8
      <Badge class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">Sky</Badge>
9
      <Badge class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
10
        Purple
11
      </Badge>
12
      <Badge class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">Red</Badge>
13
    </div>
14
  );
15
}

API Reference

Badge

The Badge component displays a badge or a component that looks like a badge.

Prop	Type	Default
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link" \| "primary-light" \| "destructive-light" \| "success-light" \| "warning-light" \| "info-light" \| "primary-outline" \| "destructive-outline" \| "success-outline" \| "warning-outline" \| "info-outline"`	`"default"`
`class`	`string`	-

For primitive props, see the Kobalte Badge API reference.