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.

Overview

Usage

Schema

Edit this page

Testing Steps

{% 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`	—