# Status filter chip

A pressable chip with a count that filters a list by status. The counts on a filter row always add up to the total the page shows.

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** ToggleGroup
- **Build:** Radix `ToggleGroup` (single or multiple) via shadcn `toggle-group`.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Label = the status name exactly; count after it.

## Do

- Make counts add up to the page total.

## Don't

- Use the chip colour fill for the pressed state; pressed is the accent ground.

## Accessibility

- **Keyboard:** Tab to each chip; Space toggles.
- **ARIA:** `aria-pressed` on each; the row is a `role="group"` with an `aria-label` ("Filter by status").
- **ARIA:** When single-select, use `ToggleGroup type="single"` semantics.
- **Focus:** Halo ring as fields.

## Tokens

`--s-2` `--s-3` `--r-control` `--secondary-border` `--background` `--w-medium` `--font-voice` `--font-stretch-title` `--foreground` `--motion-hover` `--motion-focus` `--muted` `--w-regular` `--font-ui` `--muted-foreground` `--accent` `--primary` `--w-semibold` `--ring` `--focus-ring` `--warning`

## Files

`status-filter-chip.html` live specimen · `status-filter-chip.css` kit rules · `status-filter-chip.d.ts` props · full page: `docs/components/status-filter-chip/` (phone: `m/`).