chip docs

2.13.0

Chip

Chip Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-chip
Source code
View on Github
Dependencies

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

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
      • academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, collaboration, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, discussions, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, file-small, filter, financial, full-screen, github, global, government, healthcare, heart, hospitality, ideas, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, questions, refresh, reply, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
    • background

      Background shape. This applies only to 'xlarge' icons.


      Type: string
      • circle or square
    • size

      Icon size.


      Type: string
      • small, medium, large, xlarge
    • color

      Icon color. Currently only support default (black) and teal.


      Type: string
      • teal or blue
Tag

DEPRECATED - tag is automatically determined by URL.

 —
  • —
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 —
  • —

chip

Chip

chip url variations

URL No URL Has URL Target Open link in current tab Open link in new tab

chip size variations

Size xsmall small medium

chip icon variations

Icon Icon before Icon after

chip with web component

Web Component Usage Bolt Chip is a web component, you can simply use <bolt-chip> in the markup to make it render.
Chip
<bolt-chip> Chip </bolt-chip>
Basic Usage All the props defined in the schema table can be used directly on the <bolt-chip> element.
Linked chip
<bolt-chip spacing="small" url="https://pega.com" target="_blank"> Linked chip </bolt-chip>
Advanced Usage To add icons to <bolt-chip>, place a <bolt-icon> next to your chip text. For icons to have the correct spacing, you must add the slot attribute to <bolt-icon>. The slot value can be before or after.
Chip with icon
<bolt-chip> Chip with icon <bolt-icon name="check" slot="after"></bolt-icon> </bolt-chip>