Pill combines short labels with optional icons and a dismiss affordance—filters, tags, and selections operators remove without opening a menu. Compared to a Badge, pills invite interaction and removal; compared to a Button, pills are lower emphasis and typically appear in a cluster.
- Applied filter tokens operators clear one by one.
- Compact tag collections on records (skills, incident categories) with dismiss or click-to-filter.
- Status or metadata that behaves like a chip—use semantic colors faithfully.
- Read-only status with no interaction—
Badge fits better.
- Long sentences—truncation harms scanning. Move detail to tooltips or a detail pane.
- Single primary actions—use
Button.
- Size.
Small in table toolbars; Regular default; Large for emphasized tag rows.
- Color. Reserve semantic colors for meaningful states;
Default for neutral categorization.
- One to three words; sentence case unless product mandates otherwise. Localize via
formatMessage.
- Dismiss tooltips clarify whether removal deletes data or clears a filter.
- Interactive pills expose hover and focus styles; disable the dismiss affordance when removal would violate permissions.
onClick pills need non-hover affordances so touch users can trigger them.
Do
- Wrap pill rows with consistent gaps and readable touch spacing.
- Debounce rapid add/remove when backed by a network call.
Don't
- Overload a row with dozens of pills—summarize or link to detail.
- Use
Error color for non-error tagging.
Dismiss buttons have names ("Remove filter: Status Open"); keyboard users can tab through pills predictably. See Accessibility for the full contract.
- Badge for non-interactive status.
- Data table for filter pill integration in the block.
