chip list docs

2.15.2

Chip List

Chip List Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-chip-list
Source code
View on Github
Dependencies
@bolt/components-chip @bolt/components-list @bolt/core-v3.x

Overview

Chip-list can contain multiple chips. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-chip-list
Overview Usage Schema Edit this page Testing Steps

Usage

{% include "@bolt-components-chip-list/chip-list.twig" with { items: [ { text: "Chip 1", url: "#!" }, { text: "Chip 2", url: "#!" }, { text: "Chip 3", 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)
items

An array of Chips.

 array —
  • [items]:
    • Type: object

      Chip.

    • Properties:
    size

    Sets the size used for all of the chips (if size isn't specified on the individual chip)

    		 —
    • xsmall, small, medium
    content_items

    Deprecated (will be removed in Bolt v3.0) - use the items prop instead.

    		 array —
    • [items]:
      • Type: object

        Chip.

      • Properties:

      chip list

      Chip list with links

      Do not include any data or information in your posts that are confidential! Apply basic practices for collaborative work. Be honest, respectful, trustworthy and helpful. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

      Chip list with text

      Do not include any data or information in your posts that are confidential! Apply basic practices for collaborative work. Be honest, respectful, trustworthy and helpful. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

      chip list size

      Chip list with size set on parent

      Do not include any data or information in your posts that are confidential! Apply basic practices for collaborative work. Be honest, respectful, trustworthy and helpful. Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.
      Debug Panel