2.24.1

Chip

Chip Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-chip
Source code
View on Github
Dependencies
@bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue

Overview

Pill like container for displaying meta data text. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-chip
Overview Usage Schema Edit this page Testing Steps

Usage

  {% include "@bolt-components-chip/chip.twig" with {
  text: "This is a chip",
  url: "#!",
} 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
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

Specifies where to display the linked URL. This may also be passed as part of attributes.

 string —
  • —
icon

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

 object —
  • @bolt-components-icon/icon.schema.json > Object details
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      Type: object

      • —
    • name

      Icon name

      Type: string

      • —
    • background

      Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!

      Type: string

      • none, circle, square
    • size

      Icon size.

      Type: string

      • small, medium, large, xlarge
    • color

      Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.

      Type: string

      • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink
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,
  • —
Open Accordion Close Accordion
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 —
  • —
Debug Panel