Badge

A small label for status, counts or categories.

DefaultMutedDestructiveSuccessWarningInfo

import { Badge } from "@/components/ui/badge";

export default function BadgeVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>Default</Badge>
      <Badge variant="muted">Muted</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="info">Info</Badge>
    </div>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add badge
pnpm dlx shadcn@latest add @jarvis/badge

Usage

import { Badge } from "@/components/ui/badge";

export function PlanBadge() {
  return <Badge variant="info">Beta</Badge>;
}

Examples

With icons

Pair a status color with an icon or a word, so the badge doesn't rely on color alone.

PaidPendingOverduemain

import { CircleAlertIcon, CircleCheckIcon, ClockIcon, GitBranchIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";

export default function BadgeWithIcons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="success">
        <CircleCheckIcon />
        Paid
      </Badge>
      <Badge variant="warning">
        <ClockIcon />
        Pending
      </Badge>
      <Badge variant="destructive">
        <CircleAlertIcon />
        Overdue
      </Badge>
      <Badge>
        <GitBranchIcon />
        main
      </Badge>
    </div>
  );
}

Counts

A badge can sit inside a button, beside its label.

3128

import { InboxIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

export default function BadgeCounts() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="muted">3</Badge>
      <Badge variant="muted">128</Badge>
      <Button variant="secondary">
        <InboxIcon />
        Inbox
        <Badge variant="muted">4</Badge>
      </Button>
    </div>
  );
}

As a link

Pass an element to render to make the badge a link or a button.

v2.4.0

import { ArrowUpRightIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";

export default function BadgeLink() {
  return (
    <Badge render={<a href="#changelog" />}>
      v2.4.0
      <ArrowUpRightIcon />
    </Badge>
  );
}

Props

Part	Extends
Badge	<span>

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

Badge

Prop	Type	Default
`variant`	`"default" \| "destructive" \| "info" \| "muted" \| "success" \| "warning"`	`"default"`