...

Chips

Material Design describes chips as "compact elements that represent an input, attribute, or action." They can allow users to enter information, make slections, filter content, or trigger actions.

Default Chips

In Material Admin Pro, by default, chips are arranged in a chip set with each chip having it's own individual descriptor. This is a new component that has been custom built using Material Design's standards, and is not part of the Bootstrap framework by default. Active states are also supported for chips.

Option 1
Option 2
Option 3
Option 4
<div class="chip-set">
    <div class="chip active">Option 1</div>
    <div class="chip">Option 2</div>
    <div class="chip">Option 3</div>
    <div class="chip">Option 4</div>
</div>
.chip-set
    .chip.active Option 1
    .chip Option 2
    .chip Option 3
    .chip Option 4

Leading Icon

Leading icons are supported within the chip element, and can be added using a Material Icon along with the .chip-leading-icon class definition.

check Option 1
check Option 2
check Option 3
check Option 4 
<div class="chip-set">
    <div class="chip active">
        <i class="chip-leading-icon material-icons">check</i>
        Option 1
    </div>
    <div class="chip">
        <i class="chip-leading-icon material-icons">check</i>
        Option 2
    </div>
    <div class="chip">
        <i class="chip-leading-icon material-icons">check</i>
        Option 3
    </div>
    <div class="chip">
        <i class="chip-leading-icon material-icons">check</i>
        Option 4
    </div>
</div>
.chip-set
    .chip.active
        i.chip-leading-icon.material-icons check
        | Option 1
    .chip
        i.chip-leading-icon.material-icons check
        | Option 2
    .chip
        i.chip-leading-icon.material-icons check
        | Option 3
    .chip
        i.chip-leading-icon.material-icons check
        | Option 4

Close Icon

Close icons are supported within the chip element also, and can be added using a Material Icon along with the .chip-close-icon class definition.

Option 1 cancel
Option 2 cancel
Option 3 cancel
Option 4 cancel 
<div class="chip-set">
    <div class="chip">
        Option 1
        <i class="chip-close-icon material-icons">cancel</i>
    </div>
    <div class="chip">
        Option 2
        <i class="chip-close-icon material-icons">cancel</i>
    </div>
    <div class="chip">
        Option 3
        <i class="chip-close-icon material-icons">cancel</i>
    </div>
    <div class="chip">
        Option 4
        <i class="chip-close-icon material-icons">cancel</i>
    </div>
</div>
.chip-set
    .chip
        | Option 1
        i.chip-close-icon.material-icons cancel
    .chip
        | Option 2
        i.chip-close-icon.material-icons cancel
    .chip
        | Option 3
        i.chip-close-icon.material-icons cancel
    .chip
        | Option 4
        i.chip-close-icon.material-icons cancel

Leading Image

Small, leading images are also supported within chips. Leading images are rounded to a circle by default. We recommend using images that are 48x48 pixels in width and height. To use a leading image, simply insert an image into the chip before the chip text along with the .chip-leading-image class definition.

... Option 1
... Option 2
... Option 3
... Option 4 
<div class="chip-set">
    <div class="chip active">
        <img class="chip-leading-image" src="https://source.unsplash.com/pVoEPpLw818/48x48" alt="..." />
        Option 1
    </div>
    <div class="chip">
        <img class="chip-leading-image" src="https://source.unsplash.com/FURFqaPGs3U/48x48" alt="..." />
        Option 2
    </div>
    <div class="chip">
        <img class="chip-leading-image" src="https://source.unsplash.com/lDtmU_ABtcU/48x48" alt="..." />
        Option 3
    </div>
    <div class="chip">
        <img class="chip-leading-image" src="https://source.unsplash.com/g2Zf3hJyYAc/48x48" alt="..." />
        Option 4
    </div>
</div>
.chip-set
    .chip.active
        img.chip-leading-image(src='https://source.unsplash.com/pVoEPpLw818/48x48', alt='...')
        | Option 1
    .chip
        img.chip-leading-image(src='https://source.unsplash.com/FURFqaPGs3U/48x48', alt='...')
        | Option 2
    .chip
        img.chip-leading-image(src='https://source.unsplash.com/lDtmU_ABtcU/48x48', alt='...')
        | Option 3
    .chip
        img.chip-leading-image(src='https://source.unsplash.com/g2Zf3hJyYAc/48x48', alt='...')
        | Option 4

Related Links

Material Web Components Icon
Material Chips Web Component Documentation

Docs for Material's chips web component

Related Link arrow_upward
Contents
Theme Customizer*
Change the theme type!
Try a pre-built swatch!
Or choose your own colors...
Need ideas? Randomize!
Finished? Export your color palette file with install instructions!
* Note: This customizer web component is an online-only tool and is not part of the download package when purchasing the theme.