Button

A graphical element that indicates interactivity.

Twig Usage
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a button',
  attributes: {
    type: 'submit'
  }
} only %}
Schema
Prop Name Description Type Default Value Option(s)
attributes

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

object
content *

Content of the button.

any
icon_before

Append an icon before the button content. Icon element is recommended. However, <img> elements are also acceptable.

any
icon_after

Append an icon after the button content. Icon element is recommended. However, <img> elements are also acceptable.

any
icon_only

Append an icon to the button content and visually hide the text content. This prop trumps icon_before and icon_after.

any
hierarchy

Style the button appropriately based on information hierarchy.

string primary
  • primary, secondary, tertiary, transparent
size

Control the font-size and padding of the button.

string medium
  • xsmall, small, medium, large
border_radius

Control the border radius of the button.

string small
  • small, large, full
display

Control the display of the button.

string inline
  • inline, block, inline@from-small
background_color

Control the background color of the button. This has effect only on the buttons with hierarchy set to primary.

string
  • navy, teal, orange, yellow, wine, pink, berry, violet, gray-xlight, black, white
hasLoader

When set to true includes additional markup required to show the loading indicator.

boolean
Install Install
npm install @bolt/elements-button
Dependencies @bolt/core