Button

Links or native buttons with a shared role and size vocabulary.

Basic structure

button.button (or a.button for navigation)

Try the options Color Treatment Size Icon Alignment Rounded Full width Supporting subline Disabled

<button type="button" class="button">Example action</button>

Class or attribute	What it does
`is-primary/tertiary/link/info/success/warning/danger`	Shared color roles; tertiary has its own theme token.
`is-light / is-outlined`	Light or outline treatment.
`is-outlined in is-dark`	Border keeps its selected color at 75% opacity; text remains fully opaque.
`is-small / is-medium / is-large`	Named sizes; medium is default.
`has-subline + button-subline`	Stack an optional small centered supporting line beneath the action label.
`is-rounded / is-fullwidth`	Pill shape or full available width.
`buttons.is-centered / is-right`	Align a wrapping action row.
`disabled`	Use the native attribute on buttons.
`icon`	An optional SVG Icon can appear before or after the text.