# Badge

A small label for status, counts or categories.

Source: [badge.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/badge.tsx)

```tsx
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 registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/badge
```

## Usage

```tsx
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.

```tsx
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.

```tsx
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.

```tsx
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](https://base-ui.com/react/handbook/styling) and [composition](https://base-ui.com/react/handbook/composition) guides describe.

### Badge

| Prop       | Type                                                                        | Description          |
| ---------- | --------------------------------------------------------------------------- | -------------------- |
| `variant?` | `"default" \| "destructive" \| "info" \| "muted" \| "success" \| "warning"` | Default: `"default"` |