Bolt Design System

Button Hierarchy

A button can be assigned to various levels of the content hierarchy based on the information architecture of the layout.

Important Notes:

Transparent button is the lowest in the hierarchy level. This style has the lowest affordances and it should NEVER be used alone. Always pair it with a primary, secondary, or tertiary button.

Demo

Light

Dark

Twig

{% include '@bolt-elements-button/button.twig' with {
  content: 'This is a secondary button',
  hierarchy: 'secondary',
  attributes: {
    type: 'button'
  }
} only %}

HTML

<button type="button" class="e-bolt-button e-bolt-button--secondary">This is a secondary button</button>