chip docs

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

chip

Basic Chip Pill like container for displaying meta data text. Demo
Light Theme
This is a chip.
Dark Theme
This is a chip.
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'This is a chip.'
} only %}
HTML
<div class="c-bolt-chip">
  This is a chip.
</div>

chip size

Size Chip Chips come with a few sizing options. Demo
Size Xsmall Chip
Size Small Chip
Size Medium Chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Size Medium Chip',
  size: 'medium',
} only %}
HTML
<div class="c-bolt-chip c-bolt-chip--size-medium">
  Size Medium Chip
</div>

chip border radius

Border Radius Chip Other than the fully rounded chips, there are options for adjusting the border radius. Demo
Border Radius Full Chip
Border Radius Large Chip
Border Radius Small Chip
Border Radius None Chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Border Radius None Chip',
  border_radius: 'none',
} only %}
HTML
<div class="c-bolt-chip c-bolt-chip--border-radius-none">
  Border Radius None Chip
</div>

chip with icon

Chip with Icon Icons can be used in tandem with a chip. An icon can be placed before and/or after the chip text. The icon element is recommended for appending icons. However, an <img> element is also acceptable.
Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size prop for the icon element is not well supported in this scenario. When writing in plain HTML, all white space must be eliminated to have the icon display correctly next to text (in terms of spacing and wrapping). The markup must be written all in one line and spaces between HTML elements must be removed. When writing in plain HTML, <span class="c-bolt-chip__icon-before"> and <span class="c-bolt-chip__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.
Demo

Chip Icon Before and After

Chip Icon Before

Chip Icon After

Twig
// icon var
{% set icon_info_open %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'info-circle',
  } only %}
{% endset %}

// chip include
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Chip Icon',
  icon_before: icon_info_open,
  icon_after: icon_info_open,
} only %}
HTML
<div class="c-bolt-chip">
  <span class="c-bolt-chip__icon-before"><!-- Icon or image markup --></span>
  This is a chip with icons before and after
  <span class="c-bolt-chip__icon-after"><!-- Icon or image markup --></span>
</div>

chip with icon only

Chip with Icon Only Icon only chip visually hides the text content of the chip. Such a chip should be used sparingly and only in places where screen real estate is a concern.
Important Notes: If the intent is for the icon_only chip to be used as a button or link, it is reccomended to to be used in tandem with tooltip as shown in the Icon Only Button documentation.
Demo
Twig
// icon var
{% set icon_info_open %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'info-circle',
  } only %}
{% endset %}

// chip include
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Chip Icon',
  icon_only: icon_info_open,
} only %}
HTML
<div class="c-bolt-chip c-bolt-chip--icon-only" aria-label="Chip Icon">
  <span class="c-bolt-chip__icon-center"><!-- Icon or image markup --></span>
</div>

chip linked

Linked Chip Depending on if the a element or the button element is being used, the proper HTML attributes should be passed.
Important Notes: Adding the href attribute will automatically change the chip tag to an anchor.
Demo
Light Theme Linked chip.
Dark Theme Linked chip.
Twig
{% include '@bolt-components-chip/chip.twig' with {
    content: 'Linked chip.',
    attributes: {
      href: 'https://google.com',
      target: '_blank',
      rel: 'noopener'
    }
  } only %}
HTML
<a href="https://google.com" target="_blank" rel="noopener" class="c-bolt-chip">
  Linked chip.
</a>

chip button

Button Chip When appropriate, a button element can use the chip style. For example, the chip performs a function such as opening a modal or popover. Demo
Light Theme
Dark Theme
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Button Chip.',
  attributes: {
    type: 'button',
  }
} only %}
HTML
<button type="button" class="c-bolt-chip">
  Button Chip.
</button>

chip themes

Themed Chip When appropriate, use a theme class to apply brand colors to a chip.
Important Notes: When using branded chips, always make sure a chip has good contrast with the page background. For example, do not use a navy colored chip against a navy background.
Demo
Light Theme
Basic Chip
None Chip
White Chip
Black Chip
Gray-Xlight Chip
Navy-Dark Chip
Navy Chip
Navy-Light Chip
Teal Chip
Yellow Chip
Orange Chip
Pink Chip
Wine Chip
Berry Chip
Violet Chip
Dark Theme
Basic Chip
None Chip
White Chip
Black Chip
Gray-Xlight Chip
Navy-Dark Chip
Navy Chip
Navy-Light Chip
Teal Chip
Yellow Chip
Orange Chip
Pink Chip
Wine Chip
Berry Chip
Violet Chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  content: 'Navy Chip',
  attributes: {
    class: 't-bolt-navy',
  }
} only %}
HTML
<div class="c-bolt-chip t-bolt-navy">
  Navy Chip
</div>