Bolt Design System

Twig 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

Prop Name	Description	Type	Default Value	Option(s)
items	An array of Chips.	`array`	—	[items]: Type:`object`
size	Sets the size used for all of the chips (if size isn't specified on the individual chip)	`string`	—	`xsmall`, `small`, `medium`
truncate	Sets the max number of chips to show before truncating, 0 or greater	`number`	—	—
collapsible	Allows users to collapse items after expanding by clicking a close button.	`boolean`	`false`	—
id	Unique ID for Chip List, randomly generated if not provided (required for no-JS functionality).	`string`	—	—
contentItems (deprecated)	Deprecated (will be removed in Bolt v3.0) - use the `items` prop instead.	`array`	—	[items]: Type:`object` Chip.

Advanced Schema Options

expanded

Shows truncated items.

boolean

false

Install

npm install @bolt/components-chip-list

Dependencies

@bolt/components-chip

@bolt/components-list

@bolt/core-v3.x

@bolt/elements-icon

Chip List

An inline list of chips.