2.24.0

Bolt Trigger

Trigger Component in Bolt

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.

Overview Usage Schema Edit this page Testing Steps
  {% 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 , 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
Debug Panel