## Status Pill (S—165)

A task status pill (Backlog → Todo → In progress → Done) with a ring icon that fills by stage and a quick menu.

- URL: https://sundaeui.dev/components/status-pill
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/status-pill.json`
- Tags: pill, workflow, issue, status, task, dropdown

The icon is a small ring that fills a quarter per stage, so status reads without colour: empty dashed for Backlog, half for In progress, a tick for Done.
Click to open a menu, or press 1–5 while it is focused to jump straight to a status.

### Usage

```tsx
import { StatusPill } from '@/components/sundae/status-pill'

<StatusPill />
```

### Props

- `value / defaultValue` (`Status`): Current status.
- `onValueChange` (`(s: Status) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Issue trackers, task lists, content workflows.

### When not to use

- Binary done / not done: use a checkbox.

### Accessibility

- A menu button; items are menuitemradio with the current one checked.
- Number keys 1–5 set status directly.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- 1–5: Set status
- ↑ / ↓: Move in menu