Pill
Spec
This spec is version 1.1.0. Built is 1.0.0; Changes lists what differs.
Figma's "Pill" (36-4265): filter choices and quick picks, such as All / Not cleared and the payday dates. Radius full.
Rules
- Selected: surface-selected with text-inverse. Mint is never a large fill.
- Unselected: surface-raised with a border and text-primary, row text style.
- 1.1.0: at least 84px wide with the label centered; longer labels keep hugging their text (#40, not built yet).
- Pills choose or filter; they never act like buttons.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.1.0, Oct 7 2026: 84px minimum width, label centered (short labels no longer render as a circle). (#40)
- 1.0.0, Sep 30 2026: Filter and date choices; selected uses surface-selected (Figma 36-4265).