SOROUSH.DESIGN
Design SystemMarkdownStyled System

Chip

A compact tag: a label, an optional icon or avatar, and - given onClick - a button, and - given onDelete - a delete control.

Source

Accessibility

  • A plain chip is text, not focusable. A clickable one is a button.
  • A chip that only deletes takes the focus, for Backspace and Delete.
  • Name the delete control with deleteLabel: an icon alone says nothing.
  • Autocomplete shows its multiple values as chips.