# Badge
URL: /design/components/badge

A small label component for displaying status, categories, or metadata.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview omitted]

## Installation

With the style-aware registry configured in components.json ("@assistant-ui": "https\://r.assistant-ui.com/styles/{style}/{name}.json"), the flavor resolves from the project style automatically:

```bash
npx shadcn@latest add @assistant-ui/badge
```

Or add by direct URL without registry configuration:

```bash
npx shadcn@latest add https://r.assistant-ui.com/base/badge.json
```

Or install manually:

```bash
npm install @base-ui/react class-variance-authority
```

Then copy these files (packaged registry content; the source links show where each ships from):

- [components/ui/badge.tsx](https://r.assistant-ui.com/base/files/badge/components/ui/badge.tsx) ([source](https://github.com/assistant-ui/assistant-ui/blob/main/packages/ui/src/components/react/ui/base/badge.tsx))

```bash
curl -fsSL --create-dirs \
  -o 'components/ui/badge.tsx' https://r.assistant-ui.com/base/files/badge/components/ui/badge.tsx
```

## Usage

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

export function Example() {
  return <Badge>Label</Badge>;
}
```

## Examples

### Variants

Use the `variant` prop to change the visual style.

\[interactive preview omitted]

```
<Badge variant="default" />
<Badge variant="secondary" />
<Badge variant="destructive" />
<Badge variant="outline" />
<Badge variant="ghost" />
<Badge variant="link" />
```

### With icons

Badges automatically style SVG icons.

\[interactive preview component BadgeWithIconSample omitted]

Code for BadgeWithIconSample preview:

```tsx
"use client";

import { ArrowUpRight, Check, X, AlertCircle, Loader2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";

function BadgeWithIconSample() {
  return (
    <Badge variant="secondary">
      <Check />
      Success
    </Badge>
    <Badge variant="destructive">
      <X />
      Failed
    </Badge>
    <Badge variant="secondary">
      <AlertCircle />
      Pending
    </Badge>
  );
}
```

### As link

Compose with `render` in Base UI or `asChild` in Radix to render a badge as a link.

\[interactive preview component BadgeAsLinkSample omitted]

Code for BadgeAsLinkSample preview:

```tsx
"use client";

import { ArrowUpRight, Check, X, AlertCircle, Loader2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";

function BadgeAsLinkSample() {
  return (
    <Badge
      variant="secondary"
      render={
        <a
          href="https://github.com/assistant-ui/assistant-ui"
          target="_blank"
          rel="noopener noreferrer"
        />
      }
    >
      GitHub
      <ArrowUpRight />
    </Badge>
    <Badge
      variant="outline"
      render={
        <a
          href="https://www.npmjs.com/package/@assistant-ui/react"
          target="_blank"
          rel="noopener noreferrer"
        />
      }
    >
      npm
      <ArrowUpRight />
    </Badge>
  );
}
```

### Animated

Combine the badge with CSS transitions for state changes.

\[interactive preview component BadgeAnimatedSample omitted]

Code for BadgeAnimatedSample preview:

```tsx
"use client";

import { useEffect, useState } from "react";
import { ArrowUpRight, Check, X, AlertCircle, Loader2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

function BadgeAnimatedSample() {
  const [status, setStatus] = useState<"loading" | "success">("loading");

  useEffect(() => {
    const interval = setInterval(() => {
      setStatus((prev) => (prev === "loading" ? "success" : "loading"));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Badge
      variant={status === "loading" ? "secondary" : "default"}
      className="overflow-hidden"
    >
      <span className="relative inline-flex h-4 overflow-hidden">
        <span
          className={cn(
            "invisible overflow-hidden transition-[max-width] duration-500",
            status === "loading" ? "max-w-24" : "max-w-0",
          )}
        >
          <span className="flex items-center gap-1 whitespace-nowrap">
            <Loader2 className="shrink-0" />
            Loading
          </span>
        </span>
        <span
          className={cn(
            "invisible overflow-hidden transition-[max-width] duration-500",
            status === "success" ? "max-w-40" : "max-w-0",
          )}
        >
          <span className="flex items-center gap-1 whitespace-nowrap">
            <Check className="shrink-0" />
            Mission Success
          </span>
        </span>

        <span
          className={cn(
            "absolute inset-y-0 start-0 flex items-center gap-1 whitespace-nowrap transition-all duration-500",
            status === "loading"
              ? "translate-y-0 opacity-100"
              : "-translate-y-4 opacity-0",
          )}
        >
          <Loader2 className="shrink-0 animate-spin" />
          Loading
        </span>
        <span
          className={cn(
            "absolute inset-y-0 start-0 flex items-center gap-1 whitespace-nowrap transition-all duration-500",
            status === "success"
              ? "translate-y-0 opacity-100"
              : "translate-y-4 opacity-0",
          )}
        >
          <Check className="shrink-0" />
          Mission Success
        </span>
      </span>
    </Badge>
  );
}
```

## API Reference

### Badge

- `variant`: `"default" | "secondary" | "destructive" | "outline" | "ghost" | "link"` (default `"default"`) — The visual style of the badge.
- `render?`: `ReactElement | function` — Base UI: compose as a different element.
- `asChild`: `boolean` (default `false`) — Radix: merge props with a child element.
- `className?`: `string` — Additional CSS classes.

### Style variants

| Export          | Description                     |
| --------------- | ------------------------------- |
| `badgeVariants` | Styles for the badge component. |

```
import { badgeVariants } from "@/components/ui/badge";

<span className={badgeVariants({ variant: "secondary" })}>
  Custom badge
</span>
```