Button

A graphical element that indicates interactivity.

Published Last updated: 4.0.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 component is recommended. However, <img> elements are also acceptable.

any
icon_after

Append an icon after the button content. Icon component 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/components-icon @bolt/core-v3.x @bolt/lazy-queue