title	components	githubLabel	materialDesign
React Chip component	Chip	component: Chip	https://material.io/components/chips

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.

{{"component": "modules/components/ComponentLinkHeader.js"}}

Basic chip

It supports outlined and filled styling.

{{"demo": "pages/components/chips/BasicChips.js"}}

Action chip

Clickeable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non risus eget orci fringilla iaculis vitae bibendum dui.

{{"demo": ""}}

Deleteable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non risus eget orci fringilla iaculis vitae bibendum dui.

{{"demo": ""}}

Clickeable and deleteable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non risus eget orci fringilla iaculis vitae bibendum dui.

{{"demo": ""}}

Clickeable link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non risus eget orci fringilla iaculis vitae bibendum dui.

{{"demo": ""}}

Avatar chip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non risus eget orci fringilla iaculis vitae bibendum dui.

{{"demo": ""}}

Icon chip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non risus eget orci fringilla iaculis vitae bibendum dui.

{{"demo": ""}}

Color chip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non risus eget orci fringilla iaculis vitae bibendum dui.

{{"demo": ""}}

Sizes chip

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

{{"demo": ""}}

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.

{{"demo": "pages/components/chips/ChipsArray.js", "bg": true}}

Chip playground

{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}

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.