Bolt Design System

Twig Usage

{% include '@bolt-components-chip/chip.twig' with {
  text: 'This is a chip',
  url: 'https://google.com',
} 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`
border_radius	Controls the border radius of the chip.	`string`	`full`	`full`, `small`, `none`
color	Controls the color of the chip.	`string`	`auto`	`auto`, `error`, `warning`, `success`, `navy`, `teal`, `orange`, `yellow`, `wine`, `pink`, `berry`, `violet`, `gray`
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	A valid HTML target attribute to modify the behavior when clicking this element. Only valid when "url" is also present.	`string`	`_self`	`_blank`, `_self`, `_parent`, `_top`, `framename`
icon	Bolt icon. Accepts the same options as Bolt Icon Element `@bolt-elements-icon` plus an additional 'position' parameter that determines placement within the button.	`object`	—	Refer to the Icon Component Schema for options
rel	Set to `noopener`, if a link is external.	`string`	—	—
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/core-v3.x

@bolt/elements-icon

@bolt/lazy-queue

Chip