# Badge

An accessible React badge for Next.js and Tailwind CSS: small status labels in five variants, including one with a light travelling round its edge.

Source: https://ui.fewtone.com/components/badge

## Installation

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

## Usage

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

export function Status() {
  return <Badge variant="secondary">Draft</Badge>
}
```

## API reference

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "destructive" \| "outline" \| "shine"` | `"default"` | The visual style. Shine is the outline badge with two lights travelling round its edge, one lap every 3 seconds; with reduced motion they rest on the left and right. |
| `asChild` | `boolean` | `false` | Render the single child (for example a link) with the badge styles instead of a span. |

**When to use it:** Use Badge for short, non-interactive labels: a status, a version, a count or a category. Use variant="shine" sparingly, for the one label that should draw the eye (Beta, Pro). Use Button for actions, and asChild with a link when the badge should navigate.
**Built on:** Radix Slot.
**npm packages (installed by the CLI):** class-variance-authority@^0.7.1, motion@^14.0.0, radix-ui@^1.7.0.

## Examples

### Variants

Default for the main status, secondary and outline for quieter ones, destructive for problems. Shine is the outline badge with two lights travelling round its edge, in the label's colour.

```tsx
import { Badge } from "@/components/ui/badge";
import { BadgeCheckIcon } from "lucide-react";

/* Every variant with a label it might carry, named underneath */
export default function BadgeVariants() {
  return (
    <ul className="flex flex-wrap items-end justify-center gap-x-10 gap-y-6">
      <li className="flex flex-col items-center gap-2">
        <Badge>
          <BadgeCheckIcon aria-hidden />
          Verified
        </Badge>
        <span className="text-xs text-muted-foreground">Default</span>
      </li>
      <li className="flex flex-col items-center gap-2">
        <Badge variant="secondary">Draft</Badge>
        <span className="text-xs text-muted-foreground">Secondary</span>
      </li>
      <li className="flex flex-col items-center gap-2">
        <Badge variant="destructive">Failed</Badge>
        <span className="text-xs text-muted-foreground">Destructive</span>
      </li>
      <li className="flex flex-col items-center gap-2">
        <Badge variant="outline">v2.4.0</Badge>
        <span className="text-xs text-muted-foreground">Outline</span>
      </li>
      <li className="flex flex-col items-center gap-2">
        <Badge variant="shine">Beta</Badge>
        <span className="text-xs text-muted-foreground">Shine</span>
      </li>
    </ul>
  );
}
```

### As a link

With asChild, the badge styles go onto its child, so a link stays a real link. Its background shifts on hover.

```tsx
import { Badge } from "@/components/ui/badge";
import { ArrowUpRightIcon } from "lucide-react";

export default function BadgeAsLink() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Badge asChild variant="outline">
        <a href="https://github.com/FewTone/ui/releases" target="_blank" rel="noreferrer">
          Release notes
          <ArrowUpRightIcon aria-hidden />
        </a>
      </Badge>
      <Badge asChild variant="shine">
        <a href="/roadmap">Beta</a>
      </Badge>
    </div>
  );
}
```

## Related

- [Spinner](https://ui.fewtone.com/components/spinner.md): An accessible React spinner for Next.js and Tailwind CSS: one line going round an infinity that fills it once the task is done.
- [Button](https://ui.fewtone.com/components/button.md): An accessible React button for Next.js and Tailwind CSS with six variants, three sizes, icons and a soft tint on hover and press, built on a native button.