Components Buttons

Buttons

Actions in three colour families — Primary, Secondary, and Danger. Secondary is the outline-style supporting action. Danger ships with both Filled and Outlined sub-variants.

<koala-btn>

Canonical

The most-used shape. Use Primary once per view for the page's reason for being — submit, accept, create, send.

Variants

4 variants

Primary

koala-btn="Primary"

Secondary

koala-btn="Secondary"

Danger filled

koala-btn="Danger"

Danger outlined

koala-btn-variant="Outlined"

States

4 states

Default

Hover

Hover the button to see it

Focus

Use the keyboard to reach it

Disabled

Props

2 attributes

Attribute	Values	Notes
koala-btn	Primary, Secondary, Danger	Required. Selects the colour family.
koala-btn-variant	Filled, Outlined	Defaults to `Filled`. Only meaningful with `Danger`.
disabled	—	Standard HTML attribute. Drops opacity and blocks events.
asp-page / href	Razor route or URL	Emits as `<a>` instead of `<button>`.

Do & don't

Do One Primary per view. Pair it with Secondary for the alternate action.

Don't Don't stack three Primaries. The hierarchy disappears and the eye can't pick the most important action.

Icon labels

Buttons may include a leading icon. The helper keeps the icon and label on one line; surrounding layouts wrap the whole button when space is tight.

Loading state

Applied to a button to wire an Alpine loading state. On click, the helper swaps the label for a spinner, disables the button, and dims every other button / link inside the same form so the user can't fire two submissions.

Click the button to see the spinner. State resets on the next page render.