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
Vuexy

Customized Closeable Icon

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

Dribble
Github
Behance
Vue Js
Vuexy

Theme Customizer

Customize & Preview in Real Time
Menu Colors

Theme Layout
Light
Dark
Semi Dark

Collapse Sidebar
Collapse Menu

Navbar Colors

Footer Type

Hide Scroll To Top
Buy Now