# Badge

> Tone badges and status dots for states like paid, pending, live and degraded.

Component · Free · https://lodeui.com/components/badge

## When to use

- Short status or category labels: Paid, Draft, Beta.
- Service health with a live dot (StatusBadge).

## When not to use

- Clickable filters: use buttons or a segmented control.
- Long text: use an alert or plain text.

## Installation

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

## Usage

```tsx title="example.tsx"
import { Badge, StatusBadge } from "@/components/ui/badge";

export function InvoiceStatus() {
  return (
    <div className="flex gap-2">
      <Badge tone="success">Paid</Badge>
      <StatusBadge status="online" live>Operational</StatusBadge>
    </div>
  );
}
```

## API reference

### Badge

A small label. Accepts any span attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tone | `"default" \| "outline" \| "success" \| "warning" \| "danger" \| "info" \| "solid"` | `"default"` | Color. |
| size | `"sm" \| "md"` | `"sm"` | Text and padding size. |

### StatusBadge

A badge with a colored dot for system states.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| status | `"online" \| "degraded" \| "offline" \| "pending" \| "info"` | – | Sets the dot color. |
| live | `boolean` | – | Pulses the dot. |

## Accessibility

- The text carries the meaning; the color and dot only support it.
- Tones keep text contrast at AA on both themes.

## Motion

- Only the live dot pulses.

## Responsive behavior

- Inline; never wraps.

## Performance

- Static markup.

## Notes for AI

- Write the status as text ("Failed"), don't rely on tone alone.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Uptime bar](https://lodeui.com/components/uptime-bar) — Daily status bars with uptime percentage and incident tooltips.