Chips
There are a couple types of chips that you can use. For now you can use the default and outlined.
Default
For the default chip all you need to use is the class .chip.
For the remove icon you need to add a icon according to the iconography.
You also need to give the chip the class .chip--remove and the icon .chip__remove.
If you would also like to add a thumbnail/ image than you need to aad the class .chip--thumbnail to the chip.
You also need to give the image the class .chip__thumbnail.
Chip
Chip
cancel
<div class="chip">Chip</div>
<div class="chip chip--remove">
Chip
<i class="material-icons icon chip__remove">cancel</i>
</div>
<div class="chip chip--remove chip--thumbnail">
<img src="//i.pravatar.cc/24" class="chip__thumbnail" alt="Chip thumbnail">
Chip
<i class="material-icons icon chip__remove">cancel</i>
</div>
Outlined
The outlined chip has the same functionality/ classes as the default chip. However you do need to add the class .chip--outlined as well.
Chip
Chip
cancel
<div class="chip chip--outlined">Chip</div>
<div class="chip chip--outlined chip--remove">
Chip
<i class="material-icons icon chip__remove">cancel</i>
</div>
<div class="chip chip--outlined chip--remove chip--thumbnail">
<img src="//i.pravatar.cc/24" class="chip__thumbnail" alt="Chip thumbnail">
Chip
<i class="material-icons icon chip__remove">cancel</i>
</div>
Settings
| Scss | CSS | Result |
|---|---|---|
| $chip-height | --chip-height | Change chip height |
| $chip-padding | --chip-padding | Change chip padding |
| $chip-background | --chip-background | Change chip background |
| $chip-color | --chip-color | Change chip color |
| $chip--hover-background | --chip--hover-background | Change chip hover background |
| $chip--active-background | --chip--active-background | Change chip active background |
| $chip--disabled-color | --chip--disabled-color | Change chip disabled color |
| $chip--disabled-background | --chip--disabled-background | Change chip disabled background |
| $chip__thumbnail-size | --chip__thumbnail-size | Change chip thumbnail size |
| $chip__thumbnail-color | --chip__thumbnail-color | Change chip thumbnail color |
| $chip__thumbnail-margin | --chip__thumbnail-margin | Change chip thumbnail margin |
| $chip__thumbnail-padding-left | --chip__thumbnail-padding-left | Change chip thumbnail padding left |
| $chip__remove-size | --chip__remove-size | Change chip remove size |
| $chip__remove-margin | --chip__remove-margin | Change chip remove margin |
| $chip__remove-color | --chip__remove-color | Change chip remove color |
| $chip--remove-padding-right | --chip--remove-padding-right | Change chip remove padding right |
| $chip--outlined-border | --chip--outlined-border | Change chip outlined border |
| $chip--outlined--hover-background | --chip--outlined--hover-background | Change chip outlined hover background |
| $chip--outlined--active-background | --chip--outlined--active-background | Change chip outlined active background |
| $chip--outlined--disabled-color | --chip--outlined--disabled-color | Change chip outlined disabled color |
| $chip--outlined--disabled-background | --chip--outlined--disabled-background | Change chip outlined disabled background |
| $chip--outlined--thumbnail-padding-left | --chip--outlined--thumbnail-padding-left | Change chip outlined thumbnail padding left |
| $chip--outlined--remove-padding-right | --chip--outlined--remove-padding-right | Change chip outlined remove padding right |