chip docs

Chip

Pill like container for displaying meta data text.

Published Last updated: 4.6.0 Change log Github NPM
Twig Usage 
{% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a chip',
  url: 'https://google.com',
} 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. Used to apply with extra HTML attributes to the outer <bolt-chip> tag.

 object —
  • —
text *

Text content of the chip.

 string , array , object —
  • —
size

Controls the size of the chip.

 string small
  • xsmall, small, medium
border_radius

Controls the border radius of the chip.

 string full
  • full, small, none
color

Controls the color of the chip.

 string gray
  • error, warning, success, navy, teal, orange, yellow, wine, pink, berry, violet, gray
url

Optional. Contains a URL that the chip points to. When URL is present, tag changes to a, otherwise tag would be span.

 string —
  • —
target

A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present.

 string _self
  • _blank, _self, _parent, _top, framename
icon

Bolt icon. Accepts the same options as Bolt Icon Element @bolt-elements-icon plus an additional 'position' parameter that determines placement within the button.

 object —
tag

DEPRECATED - tag is automatically determined by URL.

 — —
  • —
iconOnly

Display only the icon and hide the text. For accessibility purposes you are still required to provide text.

 boolean false
  • —
Advanced Schema Options
no_shadow

Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

 boolean —
  • —
no-shadow

Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.

 boolean —
  • —
Install Install 
npm install @bolt/components-chip
Dependencies @bolt/core-v3.x @bolt/elements-icon @bolt/lazy-queue

chip

Basic Chip A chip is commonly used to display meta data. Demo This is a chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a chip',
} only %}
HTML
<bolt-chip>This is a chip</bolt-chip>

chip url variations

Linked Chip A chip can be linked and its target can be modified. Demo This is a linked chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a linked chip',
  url: 'https://google.com',
  target: '_blank',
} only %}
HTML
<bolt-chip url="https://google.com" target="_blank">This is a linked chip</bolt-chip>

chip size variations

Chip Size Chips come with a few sizing options. Demo xsmall small medium
Twig
{% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a medium chip',
  size: 'medium',
} only %}
HTML
<bolt-chip size="medium">This is a medium chip</bolt-chip>

chip border radius variations

Chip Border Radius Other than the fully rounded chips, there are other options for adjusting the border radius. Demo full small none
Twig
{% include '@bolt-components-chip/chip.twig' with {
  text: 'This chip has small border radius',
  border_radius: 'small',
} only %}
HTML
<bolt-chip border-radius="small">This chip has small border radius</bolt-chip>

chip icon variations

Chip Icons Icons can be used within a chip. Important Notes: When using icon-only chips, make sure to still pass text. The text will act as a label for the icon. Demo Icon before Icon after Show more
Twig
// Regular chip with icon
{% include '@bolt-components-chip/chip.twig' with {
  text: 'Chip with icon',
  icon: {
    name: 'lock',
    position: 'after',
  },
} only %}

// Icon-only chip
{% include '@bolt-components-chip/chip.twig' with {
  text: 'Chip with icon',
  icon: {
    name: 'lock',
  },
  iconOnly: true,
} only %}
HTML
// Regular chip with icon
<bolt-chip><span slot="before"><!-- Icon or image markup --></span>Chip with icon</bolt-chip>

// Icon-only chip
<bolt-chip icon-only><span slot="before"><!-- Icon or image markup --></span>Chip with icon</bolt-chip>

chip color variations

Colored Chips When appropriate, use the color prop to apply status or brand colors to a chip. Important Notes: When using status chips, it is recommended to append an appropriate icon in front of the text. When using branded chips, always make sure a chip has good contrast with the page background. For example, do not use navy colored chip on a navy background. Demo Status Colors Error Warning Success Selective Brand Colors navy teal orange yellow wine pink berry violet gray
Twig
{% include '@bolt-components-chip/chip.twig' with {
  text: 'Colored chip',
  color: 'teal',
} only %}
HTML
<bolt-chip color="teal">Colored chip</bolt-chip>