2.5.1

Chip

Chip Component in Bolt

Published

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

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

Install via NPM
npm install @bolt/components-chip
  {% 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-style attributes object with extra attributes to append to this component.

object
text

Chip Text.

string
url

Optional. When url is present, tag changes to a, otherwise tag would be span.

string
tag

Html tag to be used. If a URL is provided, this will be ignored and a will be always be used.

string span
  • a or span

chip

Web Component Usage

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

Example

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

Simple usage

Text of the chip

Passing url

Chip with link