Components · Controls

ChipChip

Filters and tabs: pick one of several

npx shadcn@latest add @umbra/chip

A toggle pill. A selected chip is marked by shape: a 2 px --primary-edge border (where the accent itself isn’t visible on white), light glass .glass-soft (tone, edge highlight, blur, no shadow) and weight 500. The chip border is one of the two cases where a border is allowed

When to use

  • Filters above a list: “All”, “With summaries”, “Not recognized”
  • Section tabs: role="tab" on chips and role="tablist" on the group

When not to use

  • An action (“Export”, “Delete”): Button
  • More than six options or long names: Select
  • “On / off”: Toggle

Meetings

7 recordings this week

Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min

Do

  • One selected in a tab group; several in a filter group

Don’t

  • Accent fill on a selected chip: border only
  • Chips of different heights; an icon instead of a label