2.5.6

Bolt Trigger

Trigger Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-trigger
Source code
View on Github
Dependencies

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

Description

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)
attributes

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

object
content

Main content of the trigger (Twig only).

string or array or 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
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

Trigger with a tag

This <a> has no outline on focus

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="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>