Bolt Design System

Twig Usage

  {% include "@bolt-components-chip/chip.twig" with {
  text: "This is a chip",
  url: "#!",
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Used to apply with extra HTML attributes to the outer <bolt-chip> tag.	`object`	—	—
text *	Text content of the chip.	`string` , `array` , `object`	—	—
size	Controls the size of the chip.	`string`	`small`	`xsmall` , `small` , `medium`
url	Optional. Contains a URL that the chip points to. When URL is present, tag changes to `a`, otherwise tag would be `span`.	`string`	—	—
target	Specifies where to display the linked URL. This may also be passed as part of `attributes`.	`string`	—	—
icon	Bolt icon. Accepts the same options as Bolt Icon Component `@bolt-components-icon` plus an additional 'position' parameter that determines placement within the button.	`object`	—	Refer to the Icon Component Schema for options
tag	DEPRECATED - tag is automatically determined by URL.	—	—	—
iconOnly	Display only the icon and hide the text. For accessibility purposes you are still required to provide text.	`boolean`	`false,`	—

Advanced Schema Options

no_shadow	Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—
no-shadow	Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is handled globally based on browser support.	`boolean`	—	—

Install

  npm install @bolt/components-chip

Dependencies

@bolt/components-icon

@bolt/core-v3.x

@bolt/lazy-queue

Chip