The <mi-chip> element can be used to display a chip. The chip can have an active state, as well as an icon, which is an optional attribute.

Example usage:

<!-- HTML -->

<mi-chip content="LinkedIn" icon="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/LinkedIn_icon_circle.svg800px-LinkedIn_icon_circle.svg.png"></mi-chip>

icon attribute

content attribute

active attribute


Property Attribute Description Type Default
active active Checks if the chip is active and applies different styling to the component. boolean false
backgroundColor background-color The background color of the chip. The default #005655 HEX value refers to the --brand-colors-dark-pine-100 from MIDT string '#005655'
content content The chip content that is displayed in the component. string undefined
icon icon The icon source. string undefined