chip docs

Chip

Pill like container for displaying meta data text.

Published Last updated: 5.5.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 auto
  • auto, 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 —
rel

Set to noopener, if a link is external.

 string —
  • —
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',
  rel: 'noopener'
} only %}
HTML
<bolt-chip url="https://google.com" target="_blank" rel="noopener">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 color is null or set to auto, the default design has a semi-transparent background that works across all color themes; when color is set to a specific color, the chip will always render in that color. 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 a navy colored chip against a navy background. Demo Status Colors Error Warning Success Selective Brand Colors auto 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>