Skip to content

Chip

Chips are compact elements that represent an input, attribute, or action.

Chips allow users to enter information, make selections, filter content, or trigger actions.

While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context.

Chip

Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter" and (string) Avatar.

  • Chips with the onClick prop defined change appearance on focus, hover, and click.
  • Chips with the onDelete prop defined will display a delete icon which changes appearance on hover.
Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable Link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Outlined Chips

Outlined chips offer an alternative style.

Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Chip array

An example of rendering multiple Chips from an array of values. Deleting a chip removes it from the array. Note that since no onClick prop is defined, the Chip can be focused, but does not gain depth while clicked or touched.

  • Angular
  • jQuery
  • Polymer
  • React
  • Vue.js

Small Chip

You can use the size prop to define a small Chip.

Filled variant

Basic
M
Clickable
Natacha
Deletable
Clickable Deletable
Custom delete icon
Clickable Link
M
Primary Clickable
Primary Clickable
Deletable Primary
Deletable Secondary

Outlined variant

Basic
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Chip Playground

Chip Component
<Chip />

Accessibility

If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (keyup event) Backspace or Delete will call the onDelete handler while releasing Escape will blur the Chip.