Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts. There are four types of chips: assist, filter, input, and suggestion.

Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/chip/style.css');

Usage

Start with a button or div element and add the chip class name:

<button class="chip">Chip</button>

Leading Icon (Optional)

To add a leading icon to a chip add a i element with the material-icons class name:

<button class="chip">
  <i class="material-icons">favorite</i>
  <label>Chip</label>
</button>

Trailing Icon (Optional)

To add a trailing icon to a chip add a i element with the material-icons class name:

<button class="chip">
    <label>Chip</label>
  <i class="material-icons">close</i>
</button>

Variants

Default

Default chip styling.

<button class="chip">
  <i class="material-icons">add</i>
  <label>Default</label>
</button>

Assist

Assist chip styling.

<button class="chip assist">
  <i class="material-icons">info</i>
  <label>Default</label>
</button>

Filter

Filter chip styling.

<button class="chip filter">
  <i class="material-icons">filter_list</i>
  <label>Default</label>
</button>

Input

Input chip styling.

<button class="chip input">
  <i class="material-icons">edit</i>
  <label>Default</label>
</button>

Suggestion

Suggestion chip styling.

<button class="chip suggestion">
  <i class="material-icons">help</i>
  <label>Default</label>
</button>

Design Tokens

Resources

• ARIA Resources
• MDN
• Material Design