# Badge

A short label that names a status or a category. The pill stays ink and the mark carries the tone.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/badge
```

## Usage

```tsx
import { Badge } from '@/components/fetaui/badge'

export function Example() {
  return <Badge tone="success">Verified</Badge>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| tone | neutral, info, success, warning, danger, accent | neutral |
| variant | soft, outline, inverse, ghost | soft |
| size | sm, md, lg | md |
| mark | boolean | true |
| icon | ReactNode |  |
| href | string |  |
| animated | boolean | true |
| BadgeCount value | number |  |
| BadgeCount max | number | 99 |
| BadgeCount label | string | required |
| BadgeState state | success, loading, error, warning, info, action | required |
| BadgeAnchor badge | ReactNode | required |

## When to use

- One or two words about status or category.
- Success for done, Warning for needs attention, Danger for blocked, Info for in progress, Accent for new.
- Badge Count marks what is new. Badge State marks the result of an action.

## When not to use

- As a button. When a badge goes somewhere, give it `href`.
- More than one Inverse badge per view.

## Accessibility

- The label carries the meaning. The mark only supports it, and each tone has its own glyph.
- Counts need an accessible name, like 3 unread messages.
- Badge State speaks its state, or pass `label={null}` when text beside it says the same.

## Motion

- Enters at 0.9 scale and fades in over 150 ms, then sits still.
- Tone changes crossfade in 150 ms.
- Count digits roll, and the count pops in and scales out as it clears.
- State glyphs swap on a soft spring with a blur. Loading turns once a second.
- With reduced motion, entry is a 120 ms fade, digits swap and the loading glyph holds still.