Bolt Design System

HTML Attributes for Button

Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed.

Important Notes:

<a> requires the href attribute.

<button> requires the type attribute.

Demo

This button has the "href", "target", "rel", and "id" attributes

Twig

// <button>
{% include '@bolt-elements-button/button.twig' with {
  content: 'This button has the "type" attribute',
  attributes: {
    type: 'submit',
  }
} only %}

// <a>
{% include '@bolt-elements-button/button.twig' with {
  content: 'This button has the "href", "target", and "id" attributes',
  attributes: {
    href: 'https://google.com',
    target: '_blank',
    rel: 'noopener',
    id: 'js-bolt-some-unique-id'
  }
} only %}

HTML

<a href="https://google.com" target="_blank" rel="noopener" id="js-bolt-some-unique-id" class="e-bolt-button">This button has the "href", "target", "rel", and "id" attributes</a>