# StatusPill, Badge and CountBadge

> Status pills (tinted fill, tinted edge, deep ink), small uppercase tags, and count badges.

Category: Data display. Docs page: https://rime.mjsons.net/components/status-pill

## Installation

```bash
npx shadcn@latest add KezLahd/rime/badge
```

StatusPill names a record's state in a list or header. Badge is a small uppercase tag (soft or solid) for categories and flags. CountBadge is a number of things waiting, capped at max (99+).

Tones: neutral, info, success, warning, danger and deep (the brand). Every tone's ink clears 4.5:1 on its own fill over worst-case glass.

## Usage

```tsx
import { Badge, CountBadge, StatusPill } from "@/components/ui";

<StatusPill tone="success">Paid</StatusPill>
```

## Props: StatusPill

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` (required) | `Tone` |  |  |
| `children` (required) | `ReactNode` |  |  |
| `dot` | `boolean` |  | Leading dot in the tone colour, for dense tables where the pill needs a second cue. |
| `size` | `"sm" \| "md"` | `"md"` |  |
| `className` | `string` |  |  |
| `asChild` | `boolean` |  | Render the single child element (a link) with the pill's look. |

## Props: Badge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `Tone` | `"neutral"` |  |
| `variant` | `"soft" \| "solid" \| "default" \| "secondary" \| "destructive" \| "outline"` | `"soft"` | soft = tinted tag. solid = white text on the tone (counts needing attention). shadcn's names are accepted too: default (solid brand), secondary (soft neutral), destructive (solid danger), outline (a hairline tag with no fill). |
| `children` (required) | `ReactNode` |  |  |
| `className` | `string` |  |  |
| `asChild` | `boolean` |  | Render the single child element (a link) with the badge's look. |

## Props: CountBadge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` (required) | `number` |  |  |
| `tone` | `"brand" \| "danger" \| "warning" \| "neutral"` | `"brand"` |  |
| `label` | `string` |  | Accessible text, e.g. "3 pending requests". The number alone is ambiguous. |
| `max` | `number` | `99` |  |
| `className` | `string` |  |  |

## Examples

### Tones

```tsx
<StatusPill tone="neutral">Draft</StatusPill>
<StatusPill tone="info">Sent</StatusPill>
<StatusPill tone="warning" dot>Overdue</StatusPill>
<StatusPill tone="success">Paid</StatusPill>
<StatusPill tone="danger">Void</StatusPill>
<Badge tone="brand" variant="solid">New</Badge>
<CountBadge count={4} label="4 waiting" />
```

### shadcn badge variants

Badge accepts shadcn's variant names: default (solid accent), secondary (soft neutral), destructive (solid danger) and outline (a hairline, no fill). asChild renders a link with the badge's look.

```tsx
<Badge variant="default">New</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="destructive">Overdue</Badge>
<Badge variant="outline">Beta</Badge>
<Badge variant="outline" asChild><a href="#changelog">Changelog</a></Badge>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--pill-font-size` | `12px` |
| `--pill-pad-x` | `calc(10px * var(--density))` |
| `--pill-radius` | `var(--r-full)` |
| `--r-circle` | `50%` |
| `--tag-brand-bg` | `var(--brand-gradient)` |
| `--tag-radius` | `var(--r-2xs)` |

System tokens it reads: `--border-w`, `--brand-fill`, `--brand-gradient`, `--brand-ink`, `--brand-line`, `--danger-fill`, `--danger-ink`, `--danger-line`, `--density`, `--info-fill`, `--info-ink`, `--info-line`, `--ink-brand`, `--ink-inverse`, `--ink-secondary`, `--neutral-fill`, `--neutral-ink`, `--neutral-line`, `--r-2xs`, `--r-full`, `--success-fill`, `--success-ink`, `--success-line`, `--success-solid`, `--warning-fill`, `--warning-ink`, `--warning-line`, `--warning-solid`, `--wash-strong`.

## Accessibility

- Colour is never the only signal: the label always says the state.
- CountBadge takes a label for screen readers ("4 waiting").

## Do

- Map each status to one tone in one place and reuse it.

## Don't

- Don't make a pill clickable; it is a label.