chip docs

2.5.3

Chip

Chip Component in Bolt

Published

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

Overview

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

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

This is a chip with link

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.

Example

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

Simple usage

Text of the chip

Passing url

Chip with link