trigger docs

2.16.0

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!

Overview

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.

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
  • —

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>
Debug Panel