Important Notes:By setting the prophasLoader to true, the additional markup is added to the button container to use the loader indicator.To assist screen readers, also the aria-busy attribute is added.To trigger the loading indicator add the e-bolt-button--is-loading class via JavaScript. For accessibility, also set aria-busy to true. Once you are done loading, remove the loading class and set aria-busy to false.When the button is clicked, the button text is hidden and a spinner is shown in its place, while maintaining the width that it would have if the text were visible.
Demo
Light
Dark
Twig
{% include '@bolt-elements-button/button.twig' with {
content: 'Loading state',
attributes: {
type: 'button',
}
hasLoader: true,
} only %}
HTML
<button type="button" class="e-bolt-button" aria-busy="false">Loading state <span class="e-bolt-button__loading-spinner" aria-hidden="true"></span></button>