# Badge

Compact status labels with solid and dot appearances.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="badge-demo">
  <div className="flex w-full flex-col items-center justify-center gap-8 py-10">
    <div className="flex flex-col items-center gap-3">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge>
          Default
        </Badge>

        <Badge variant="secondary">
          Secondary
        </Badge>

        <Badge variant="destructive">
          Destructive
        </Badge>

        <Badge variant="outline">
          Outline
        </Badge>
      </div>
    </div>

    <div className="flex flex-col items-center gap-3 border-t border-border/50 pt-6 w-full max-w-xl">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge color="amber">
          Amber
        </Badge>

        <Badge color="blue">
          Blue
        </Badge>

        <Badge color="green">
          Green
        </Badge>

        <Badge color="purple">
          Purple
        </Badge>

        <Badge color="red">
          Red
        </Badge>

        <Badge color="gray">
          Gray
        </Badge>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge shape="pill" color="amber">
          Amber
        </Badge>

        <Badge shape="pill" color="blue">
          Blue
        </Badge>

        <Badge shape="pill" color="green">
          Green
        </Badge>

        <Badge shape="pill" color="purple">
          Purple
        </Badge>

        <Badge shape="pill" color="red">
          Red
        </Badge>

        <Badge shape="pill" color="gray">
          Gray
        </Badge>
      </div>
    </div>

    <div className="flex flex-col items-center gap-3 border-t border-border/50 pt-6 w-full max-w-xl">
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Badge variant="dot" color="amber">
          Pending
        </Badge>

        <Badge variant="dot" color="blue">
          Processing
        </Badge>

        <Badge variant="dot" color="green">
          Complete
        </Badge>

        <Badge variant="dot" color="purple">
          New
        </Badge>

        <Badge variant="dot" color="red">
          Failed
        </Badge>

        <Badge variant="dot" color="gray">
          Draft
        </Badge>
      </div>
    </div>

    <div className="flex flex-col items-center gap-4 border-t border-border/50 pt-6 w-full max-w-xl">
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Badge variant="secondary">
          <Check className="text-blue-500" strokeWidth="3" />

           Verified
        </Badge>

        <Badge shape="pill" variant="outline">
          <Spinner intent="default" />

          {"Syncing"}
        </Badge>

        <Badge variant="destructive">
          Error 

          <ArrowRight />
        </Badge>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-4">
        <Badge size="icon" color="blue">
          8
        </Badge>

        <Badge size="icon" color="red">
          99
        </Badge>

        <Badge size="icon" variant="secondary">
          20+
        </Badge>

        <Badge size="sm" color="green">
          Compact
        </Badge>

        <Badge shape="pill" size="sm" color="amber">
          Micro Pill
        </Badge>
      </div>
    </div>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/badge.json"
```

## Usage [#usage]

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

export function MyComponent() {
  return <Badge variant="dot" color="green">Ready</Badge>
}
```

## Examples [#examples]

### Base Variants [#base-variants]

Use the `variant` prop to change the base styling of the badge.

<ComponentPreview name="badge-variants">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Badge>
      Default
    </Badge>

    <Badge variant="secondary">
      Secondary
    </Badge>

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

    <Badge variant="destructive">
      Destructive
    </Badge>
  </div>
</ComponentPreview>

### With Icon [#with-icon]

You can render an icon inside the badge. Ensure icons use the correct styling or sizing.

<ComponentPreview name="badge-icon">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Badge variant="secondary">
      <Check className="text-blue-500" strokeWidth="3" />

       Verified
    </Badge>

    <Badge variant="outline">
      Read more 

      <ArrowRight />
    </Badge>
  </div>
</ComponentPreview>

### With Spinner [#with-spinner]

Display a loading state inside the badge using a spinner icon.

<ComponentPreview name="badge-spinner">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Badge variant="secondary">
      <Spinner intent="inherit" />

      {"Syncing"}
    </Badge>

    <Badge variant="destructive">
      <Spinner intent="inherit" />

      {"Deleting..."}
    </Badge>
  </div>
</ComponentPreview>

### Shape [#shape]

By default, badges use `rounded-none` to follow the structural design system. However, you can explicitly set `shape="pill"` to render a fully rounded pill badge.

<ComponentPreview name="badge-shape">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Badge shape="pill" color="blue">
      Pill Badge
    </Badge>

    <Badge shape="pill" variant="outline">
      Outline Pill
    </Badge>

    <Badge shape="pill" variant="secondary">
      <Check className="text-blue-500" strokeWidth="3" />

       Verified
    </Badge>
  </div>
</ComponentPreview>

### Link [#link]

Use the `asChild` prop to render a link (or any other element) as a badge.

<ComponentPreview name="badge-link">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Badge variant="outline">
      <Link href="#">Click me</Link>
    </Badge>
  </div>
</ComponentPreview>

### Micro / Sizes [#micro--sizes]

Use the `size="icon"` prop for notification bubbles, or `size="sm"` for compact spaces. These are the only badges that use `rounded-full` to stand out.

<ComponentPreview name="badge-size">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Badge size="icon" color="blue">
      8
    </Badge>

    <Badge size="icon" color="red">
      99
    </Badge>

    <Badge size="icon" variant="secondary">
      20+
    </Badge>

    <Badge size="sm" color="green">
      Compact
    </Badge>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Badge` component accepts the following props:

| Prop      | Type      | Default     | Description                                                                      |
| --------- | --------- | ----------- | -------------------------------------------------------------------------------- |
| `variant` | `enum`    | `"default"` | The visual style (`default`, `secondary`, `destructive`, `outline`, `dot`).      |
| `color`   | `enum`    | -           | Pre-defined semantic colors (`blue`, `green`, `amber`, `red`, `purple`, `gray`). |
| `size`    | `enum`    | `"default"` | The size (`default`, `sm`, `icon`).                                              |
| `asChild` | `boolean` | `false`     | Render as a different element using Radix Slot.                                  |