Chip

Last Updated: 2.4.0

NPM Package:

Getting Started

Stylistic tags for displaying meta data. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

npm install @bolt/components-chip

  {% include "@bolt-components-chip/chip.twig" with {
  text: "This is a chip",
  url: "#!",
} only %}

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
text	`string`		Chip Text.	N/A
url	`string`		Optional. When url is present, tag changes to `a`, otherwise tag would be `span`.	N/A
tag	`string`	`a` OR `span`	Html tag to be used. If a URL is provided, this will be ignored and `a` will be always be used.	`span`

Bolt Chip is a web component, you can simply use <bolt-chip> in the markup to make it render.

<bolt-chip>
  Text of the chip
</bolt-chip>

Text of the chip

Chip with link