Chip
Assist chip
<div class="chip chip--assist">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Assist chip
</div>
</div>
<div class="chip chip--assist chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
</div>
<br>
<div class="chip chip--assist chip--elevated">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Assist chip
</div>
</div>
<div class="chip chip--assist chip--elevated chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
</div>
Filter chip
<div class="chip chip--filter">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Assist chip
</div>
</div>
<div class="chip chip--filter chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
</div>
<br>
<div class="chip chip--filter chip--elevated">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Assist chip
</div>
</div>
<div class="chip chip--filter chip--elevated chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
</div>
<br>
<div class="chip chip--filter chip--selected">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Assist chip
</div>
</div>
<div class="chip chip--filter chip--selected chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
</div>
<br>
<div class="chip chip--filter chip--elevated chip--selected">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Assist chip
</div>
</div>
<div class="chip chip--filter chip--elevated chip--selected chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
</div>
<div class="chip chip--input">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Input chip
</div>
<div class="chip__action">
<button type="button" class="icon-button">
<span class="material-icons">close</span>
</button>
</div>
</div>
<div class="chip chip--input">
<div class="chip__avatar">
<span class="material-icons">account_circle</span>
</div>
<div class="chip__label">
Input chip
</div>
<div class="chip__action">
<button type="button" class="icon-button">
<span class="material-icons">close</span>
</button>
</div>
</div>
<div class="chip chip--input chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
<div class="chip__action">
<button type="button" class="icon-button">
<span class="material-icons">close</span>
</button>
</div>
</div>
<br>
<div class="chip chip--input chip--selected">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Input chip
</div>
<div class="chip__action">
<button type="button" class="icon-button">
<span class="material-icons">close</span>
</button>
</div>
</div>
<div class="chip chip--input chip--selected">
<div class="chip__avatar">
<span class="material-icons">account_circle</span>
</div>
<div class="chip__label">
Input chip
</div>
<div class="chip__action">
<button type="button" class="icon-button">
<span class="material-icons">close</span>
</button>
</div>
</div>
<div class="chip chip--input chip--selected chip--disabled">
<div class="chip__icon">
<span class="material-icons">check</span>
</div>
<div class="chip__label">
Disabled
</div>
<div class="chip__action">
<button type="button" class="icon-button">
<span class="material-icons">close</span>
</button>
</div>
</div>
Suggestion chip
Suggestion chip
Disabled
Suggestion chip
Disabled
Suggestion chip
Disabled
Suggestion chip
Disabled
<div class="chip chip--suggestion">
Suggestion chip
</div>
<div class="chip chip--suggestion chip--disabled">
Disabled
</div>
<br>
<div class="chip chip--suggestion chip--elevated">
Suggestion chip
</div>
<div class="chip chip--suggestion chip--elevated chip--disabled">
Disabled
</div>
<br>
<div class="chip chip--suggestion chip--selected">
Suggestion chip
</div>
<div class="chip chip--suggestion chip--selected chip--disabled">
Disabled
</div>
<br>
<div class="chip chip--suggestion chip--elevated chip--selected">
Suggestion chip
</div>
<div class="chip chip--suggestion chip--elevated chip--selected chip--disabled">
Disabled
</div>