Button

Basis-Klasse .button, Varianten und Größen als is-*-Modifier — beliebig kombinierbar.

Varianten

<button class="button">Default</button>
<button class="button is-primary">Primary</button>
<button class="button is-secondary">Secondary</button>
<button class="button is-danger">Danger</button>

Größen

<button class="button is-primary is-small">Small</button>
<button class="button is-primary">Normal</button>
<button class="button is-primary is-large">Large</button>

Zustände

:hover, :active und der Fokus-Ring kommen automatisch. Zusätzlich steuerbar:

<button class="button is-primary" disabled>Disabled</button>
<button class="button is-primary is-loading">Loading</button>

Der Loading-Zustand blendet den Text aus und zeigt einen Spinner — die Breite bleibt stabil.

Anpassen

Jeder Button exponiert Component-Variablen (--button-bg, --button-fg, --button-border, --button-pad-block, --button-pad-inline, --button-font-size):

<button class="button is-primary" style="--button-bg: rebeccapurple">Custom</button>