A simple demo of a button which can be given a loading state when needed. The loading state makes the button appear disabled, with a centered, animated loading icon.
The loading state is triggered by adding a modifier class:
button--loading
. It should also be set with the disabled
boolean attribute so that users cannot interact with the button (click on it,
tab to it etc) while it is in this state.
<button type="button" class="button-primary button--loading" disabled>
Button
</button>