Chip

Rounded interactive tokens for filtering and selection; dismissible when they represent applied state.

Selectable

<button class="rounded-full bg-primary px-4 py-1.5 text-xs font-medium text-white">
  ✓ All
</button>
<button class="rounded-full border border-border px-4 py-1.5 text-xs
  text-text-secondary hover:border-text-tertiary hover:text-text-primary">
  Apps
</button>

With icons

2 min read Featured Published Archived

Dismissible

macOS iOS Android Swift

Markdown for agents: /design/chip.md · spec: /design.md