Build Assets
UI Component

Chip

Compact, interactive token representing an input, attribute, filter, or selection.

Platform: bothTags: token, filter, tag, selection

Purpose

Represents a discrete piece of information the user can act on - a selected filter, an entered tag, or a chosen option. Distinct from a Badge (which is read-only status) by being interactive.

Anatomy

  • Container: pill shape, subtle background, 8–12px horizontal padding
  • Label: 13px medium
  • Optional leading icon or avatar: 14–16px
  • Optional trailing remove button: 14px x icon with its own hit target

States

  • Default: neutral background, resting
  • Hover: slightly darker background (if interactive)
  • Selected: accent background + accent text (filter chips)
  • Focus: 2px focus ring
  • Disabled: reduced opacity, no interaction

Tokens

spacing

paddingX: 10pxpaddingY: 4pxiconGap: 6px

sizing

height: 28pxborderRadius: 9999pxiconSize: 14px

Do

  • Use chips for removable inputs (tags, recipients) and toggleable filters
  • Give the remove button its own accessible label and hit target
  • Show a clear selected state for filter chips
  • Keep labels short - one to three words

Don't

  • Confuse a chip (interactive) with a badge (read-only status)
  • Rely on the tiny x alone - ensure a 44px effective touch target
  • Wrap long text inside a chip - truncate or rethink the content
  • Use chip color as the only indicator of selection

Accessibility

  • Filter/toggle chips use role="button" with aria-pressed for selection
  • Removable chips expose the remove action with aria-label (e.g. "Remove Design")
  • Ensure the remove control is keyboard reachable and ≥44px effective target
  • Selected state conveyed by more than color (text weight, icon, aria-pressed)