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 Primary Secondary Tertiary Transparent

Dark Primary Secondary Tertiary Transparent

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>