trigger docs

Bolt Trigger

An call to action with no styles.

Published Last updated: 3.1.2 Change log Github NPM
Twig Usage
  {% 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

Optional. Contains a URL that the chip points to. When URL is present, tag changes to a, otherwise tag would be span.


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

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

When used with onClickTarget, an event to fire on the targeted elements when this element is clicked. When used without onClickTarget, arbitrary javascript to execute when this element is clicked.


Requires onClick. A CSS selector for elements that the onClick event will fire on when this element is clicked.


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
Install Install
  npm install @bolt/components-trigger
Dependencies @bolt/core-v3.x @bolt/lazy-queue


trigger tag variations

Trigger with a tag

trigger cursor variations

trigger display variations

trigger outline variations

This <a> has no outline on focus

trigger disabled variations

This <a> is disabled

trigger advanced usage

Trigger Image

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

trigger with web component

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>