trigger docs


Bolt Trigger

Trigger Component in Bolt

Bolt's Component Explorer is being upgraded. It'll return in a future release!

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.

Install via NPM
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)

A Drupal-style attributes object with extra attributes to append to this component.


Main content of the trigger (Twig only).

string , array , object

Contains a URL that the link points to. This may also be passed as part of attributes.


Specifies where to display the linked URL. This may also be passed as part of attributes.


Determines the button tag type for semantic buttons

string button
  • button, submit, reset

Type of cursor shown on hover.

string pointer
  • auto, pointer, zoom-in, zoom-out

The name of a method on the 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.


Set the display property

string inline
  • inline or block

Turn off the default outline on focus

boolean false

Make trigger unusable and un-clickable. Only applies to button.

boolean false


trigger tag variations

Trigger with a tag

This <a> has no outline on focus

This <a> is disabled

trigger advanced usage

Trigger Image

Click on the thumbnail to open a modal with an enlarged image.

Web Component Usage Bolt Trigger is a web component. You can use it by simply including the <bolt-trigger> element in the markup.
This is a trigger
<bolt-trigger onclick="alert('Trigger clicked')"> This is a trigger </bolt-trigger>
Basic Usage By default Bolt Trigger renders a semantic button tag. Set the url prop to render a semantic a tag.
This is a trigger
<bolt-trigger url=""> This is a trigger </bolt-trigger>
Additional Options Customize the cursor style by setting the cursor prop.
This is a trigger
<bolt-trigger cursor="zoom-in"> This is a trigger </bolt-trigger>
Advanced Usage Use the on-click and on-click-target props to call a method on another component. See schema for more info.
<bolt-trigger on-click="show" on-click-target="js-image-modal-456" cursor="zoom-in" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="640/480"></bolt-image> </bolt-trigger> <bolt-modal class="js-image-modal-456" spacing="none" theme="none" scroll="overall"> <bolt-trigger on-click="hide" on-click-target="js-image-modal-456" cursor="zoom-out" display="block"> <bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" sizes="auto" ratio="640/480"></bolt-image> </bolt-trigger> </bolt-modal>
Debug Panel