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

<button koala-btn="Primary">Save quote</button>

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

Variants

5 variants

Primary

koala-btn="Primary"

Secondary

koala-btn="Secondary"

Danger filled

koala-btn="Danger"

Danger outlined

koala-btn-variant="Outlined"

Text

koala-btn-variant="Text"

Danger outlined — the only colour where the variant matters.

<button koala-btn="Danger" koala-btn-variant="Outlined">Discard</button>

As a link — add asp-page or href to emit an <a> instead of a <button>.

<a koala-btn="Secondary" asp-page="/Quotes/Index">Back to quotes</a>

States

4 states

Default

Hover

Hover the button to see it

Focus

Use the keyboard to reach it

Disabled

Props

6 attributes

Attribute	Values	Notes
koala-btn	Primary, Secondary, Danger	Required. Selects the colour family.
koala-btn-variant	Filled, Outlined, Text	Defaults to `Filled`. `Outlined` is only meaningful with `Danger`. `Text` is a link-styled action (no bg/border/padding; coloured text, underline on hover) for inline actions like "Mark all read" / "View all" — works on both `<button>` and `<a>`.
koala-btn-size	Default, Small	Defaults to `Default` (16px text, full padding). `Small` is a quieter control (14px text, tighter padding) held at every breakpoint — for secondary actions that sit above or beside content.
koala-btn-compact	—	Bool flag. Tighter padding + smaller text that scales up at `xl` — for dense toolbars.
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.

<button koala-loading koala-btn="Primary">Submit</button>

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