Chip

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

                            

Contextual Outline Chips

To create an outline contextual chip, use .pmd-chip-outline-* 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
.pmd-chip-* Add this class to the create a contextual chip. Optional
.pmd-chip-outline-* Add this class to the create an outline contextual chip. Optional