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.
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.
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.
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
Related Links
Docs for Material's chips web component