Default Chips

Helps you represent simple data with Various options.you can create a chip by using .chip and .chip-body. to add avatar use class .avatar inside .chip-body. use class .chip-text for chip text.

Basic Chip
LD
Avatar Text
Avatar Icon
generic img placeholder
Avatar Image
Chip Closeable

Colors

use class .chip-{color-name} with .chip to change background color of chip.

Primary chip
LD
Avatar Text
Avatar Icon
generic img placeholder
Avatar Image
Avatar Closeable

Colored Avatar

You can change background color of avatar by using .bg-{color-name} with .avatar

VS
Avatar Text
HT
Avatar Text
Avatar Text
Avatar Text
Avatar Text

Icons

To add icons in your chips wrap them inside .avatar

Default chip
Share Icon
Mail Icon
Block Icon
Battery Icon
Edit Icon

Closeable

To make your chip closeable use class .chip-closeable

Dribble
Github
Behance
Vue Js
VueAdmin

Customized Closeable Icon

You can change closeable icon by wrapping your preferred icon in .chip-closeable

Dribble
Github
Behance
Vue Js
VueAdmin