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.

Trevor Hensen close

Contextual Chips

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

Example Chip close

mood Example Chip close

Trevor Hensen close

Contextual Outline Chips

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

Example Chip close

mood Example Chip close

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