Chip

Pill like container for displaying meta data text.
Twig Usage 
{% include '@bolt-components-chip/chip.twig' with {
  content: 'This is a chip component.'
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to chip.

 object —
  • —
content *

The main chip content.

 any —
  • —
size

Controls the size of the chip.

 string small
  • xsmall, small, medium
border_radius

Controls the border radius of the chip.

 string full
  • full, large, small, none
icon_before

Append an icon before the chip content. Icon element is recommended. However, <img> elements are also acceptable.

 any —
  • —
icon_after

Append an icon after the chip content. Icon element is recommended. However, <img> elements are also acceptable.

 any —
  • —
icon_only

Append an icon to the chip content and visually hide the text content. This prop trumps icon_before and icon_after.

 any —
  • —
Install Install 
npm install @bolt/components-chip
Dependencies @bolt/core