Bolt Design System

Overview

Trigger is an unstyled component used to convey a call to action. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

npm install @bolt/components-trigger

Triggers add button or link behavior to any content without the default button or link styles.

  {% include "@bolt-components-trigger/trigger.twig" with {
  content: "This is a trigger"
} only %}

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)
Attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
Content	Main content of the trigger (Twig only).	`string` , `array` , `object`	—	—
Url	Contains a URL that the link points to. This may also be passed as part of `attributes`.	`string`	—	—
Target	Specifies where to display the linked URL. This may also be passed as part of `attributes`.	`string`	—	—
Type	Determines the button tag type for semantic buttons	`string`	`button`	`button`, `submit`, `reset`
Cursor	Type of cursor shown on hover.	`string`	`pointer`	`auto`, `pointer`, `zoom-in`, `zoom-out`
On_click	The name of a method on the `on_click_target`.	`string`	—	—
On_click_target	`className` (e.g. "js-click-me") used in `querySelector` to reference a web component on the page. `onClick`, the `on_click` method name will be called on this element.	`string`	—	—
Display	Set the display property	`string`	`inline`	`inline` or `block`
No_outline	Turn off the default outline on focus	`boolean`	`false`	—
Disabled	Make trigger unusable and un-clickable. Only applies to `button`.	`boolean`	`false`	—