# Badge

> A small label for a status or category. You can add a prefix that only screen readers announce.

Facade UI item `badge` (ui, atom).
Docs page: https://facadeui.dev/components/badge · Registry JSON: https://facadeui.dev/r/badge.json

## Install

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

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/badge.json`. The CLI also installs what it needs: class-variance-authority@^0.7.1, @facade/utils.

Files: `components/ui/badge.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/badge-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { SparklesIcon } from "lucide-react"

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

export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>Default</Badge>
      <Badge variant="primary">
        <SparklesIcon aria-hidden />
        New
      </Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="muted">Muted</Badge>
      <Badge variant="destructive" srLabel="Status: ">
        Deprecated
      </Badge>
      <Badge size="sm">Small</Badge>
    </div>
  )
}
```

## Props

### BadgeProps

Extends ComponentPropsWithoutRef<"span">, VariantProps<typeof badgeVariants>.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `srLabel` | `string` |  | A prefix only screen readers announce, for badges whose meaning is not in the visible text. |
| `children` | `ReactNode` |  |  |