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

Chip List

An inline list of chips.