# Badge & Pill

- Page: <https://kznlabs.github.io/labsUI/components/badge>

## Badge & Pill (`badge`, component)

Minimal status tags. Rounded badge or fully rounded pill, with optional dot. pulse adds an expanding live-status ring.

- Install: `npx @kznlabs/labsui add badge`
- Docs: <https://kznlabs.github.io/labsUI/components/badge>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Badge>` (+ <span> props)
  - `dot?: boolean`: Leading status dot in the current text color.
  - `pulse?: boolean`: Dot emits an expanding ring forever, like a live status. Needs `dot`.
  - `shape?: "badge" | "pill"` = `"badge"`: "pill" = fully rounded tag.
  - `variant?: "default" | "secondary" | "outline" | "destructive" | "success"` = `"default"`: Color and surface.

### Usage

```tsx
<Badge variant="success" shape="pill" dot pulse>Live</Badge>
```

### Example: status.tsx

```tsx
import { Badge } from "@/components/ui/badge";
export function Status() {
  return (
    <Badge variant="success" shape="pill" dot pulse>
      Live
    </Badge>
  );
}
```