Components Buttons

Buttons

Plum-filled actions in four colour families — Primary, Secondary, Outline, Danger. Danger ships with both Filled and Outlined sub-variants. One Primary per view; everything else supports it.

<koala-btn>

Canonical

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

Variants

6 variants

Primary

koala-btn="Primary"

Secondary

koala-btn="Secondary"

Outline

koala-btn="Outline"

Ghost

koala-btn="Ghost" · step-back tier

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, Outline, 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 with an Outline or 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.

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.