Bootstrap 4 Chip with Material Design UI

Chip component is a small, interactive element. Chip is commonly used for contacts, text, rules, icons, and photos.

Basic Chip

To create a chip add .pmd-chip to the tag.

Example Chip close


Chip with Icon

You can also create a chip with an icon.

mood Example Chip close


Chip with Avatar

To create chip that contain images, add .pmd-chip-contact to the image.

avatar Trevor Hensen close


Contextual Chips

To create contextual chip, use .pmd-chip-* class.

Example Chip close
mood Example Chip close
avatar Trevor Hensen close


Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Badge. The table lists the available classes and their effects.

Classes Effect Remark
.pmd-chip Add this class to create chips. Required
.pmd-chip-contact Add this class to create chips with an image/icon. Optional
.pmd-chip-action Add this class to the close button to remove the chip. Optional