2.23.0

Chip

Chip Component in Bolt

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

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