Chip

Pill like container for displaying meta data text.

Published Last updated: 5.8.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