trigger docs


An call to action with no styles.

Published Last updated: 5.0.0 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 on_click_target, an event to fire on the targeted elements when this element is clicked. When used without on_click_target, arbitrary javascript to execute when this element is clicked.


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


Use on_click instead.


Use on_click_target instead.


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
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
Additional Options Customize the cursor style by setting the cursor prop.
This is a trigger
<bolt-trigger cursor="zoom-in">
  This is a 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-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>