Button

A graphical element that indicates interactivity.

Published Last updated: 4.6.0 Change log NPM
Twig Usage 
{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a button',
  attributes: {
    type: 'submit'
  }
} 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 *

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
Install Install 
npm install @bolt/elements-button
Dependencies @bolt/core-v3.x