trigger docs

Bolt Trigger

An call to action with no styles.

Published Last updated: 2.28.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-trigger/trigger.twig" with {
  content: "This is a trigger"
} only %}
Schema
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
Install Install
  npm install @bolt/components-trigger
Dependencies @bolt/core-v3.x @bolt/lazy-queue

trigger

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="http://pega.com"> 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>