# Badge

Compact status pill with variants, icons and a live dot. Changing status crossfades the colour instead of snapping, success shows a check, and loading shows three pulsing dots.

> Primitive · Free · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add badge
```

## Import

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

## Variants

- `glass` — Glass: `npx @lumioui/cli add badge-glass`
- `loading` — Loading: `npx @lumioui/cli add badge-loading`
- `status` — Status: `npx @lumioui/cli add badge-status`
- `variants` — Variants: `npx @lumioui/cli add badge-variants`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "neutral" | "glass"` | — |
| `size?` | `"sm" | "md" | "lg"` | — |
| `className?` | `string` | — |
| `textClassName?` | `string` | — |
| `icon?` | `IconName | null` | Leading icon name. Ignored when `loading` is true. /
  /  Leading glyph — pass `null` to suppress the variant's auto status icon. |
| `loading?` | `boolean` | Busy: the status glyph swaps in place for three dots that brighten in turn. Default false. |
| `pulse?` | `boolean` | Live state — a small dot inside the pill that blinks while live (on-air, recording, in progress). Only pass it while the state is genuinely live. |
| `popIn?` | `boolean` | Ignite with a spark on mount — for a count that just arrived. Default false. |
| `contentKey?` | `string | number` | When this key changes, the content swaps in place (numeric keys lift ≤6px in the direction of change). |
| `accessibilityLabel?` | `string` | Accessible label — announced instead of the visible text. |
| `children?` | `React.ReactNode` | — |

## Icons rendered

- `check` — /icons.html?i=check

Source: https://lumioui.com/components/badge