Badge

Displays a small status descriptor.

import { Badge } from "@/registry/base/ui/badge";

export default function BadgeDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="ghost">Ghost</Badge>
      <Badge variant="link">Link</Badge>
    </div>
  );
}

Installation

npx shadcn@latest add https://sevenui.dev/r/badge.json

Usage

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

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

Examples

As link

Render the badge as a real anchor via the render prop — hover styles for links are built into each variant.

"use client";

import { ArrowUpRightIcon } from "lucide-react";

import { Badge } from "@/registry/base/ui/badge";

export default function BadgeLink() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge render={<a href="#changelog" />}>v0.7.0</Badge>
      <Badge variant="secondary" render={<a href="#docs" />}>
        Documentation
        <ArrowUpRightIcon />
      </Badge>
      <Badge variant="outline" render={<a href="#releases" />}>
        All releases
      </Badge>
    </div>
  );
}

With icon

A direct svg child is sized automatically.

"use client";

import { BadgeCheckIcon, StarIcon, TriangleAlertIcon } from "lucide-react";

import { Badge } from "@/registry/base/ui/badge";

export default function BadgeIcon() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="secondary">
        <BadgeCheckIcon />
        Verified
      </Badge>
      <Badge variant="outline">
        <StarIcon />
        4.9
      </Badge>
      <Badge variant="destructive">
        <TriangleAlertIcon />
        Build failed
      </Badge>
    </div>
  );
}

Processing

"use client";

import { LoaderCircleIcon } from "lucide-react";

import { Badge } from "@/registry/base/ui/badge";

export default function BadgeProcessing() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="secondary">
        <LoaderCircleIcon className="animate-spin" />
        Deploying
      </Badge>
      <Badge variant="outline">
        <LoaderCircleIcon className="animate-spin" />
        Indexing
      </Badge>
    </div>
  );
}

API reference

Badge

Renders a span by default; swap the element with the Base UI render prop (for example render={<a href="…" />} — link hover styles are built in).

Prop	Type	Default
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`
`render`	`React.ReactElement`	`span`

badgeVariants is also exported for styling custom elements.