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"

v5 refresh: heavier 600 weight, faint inset highlight on filled variants, plum-tinted lift on Primary hover, and brand-aware Outline hover (border + text + background turn plum). The new Ghost tier replaces Outline where the action is a genuine step-back rather than an equally-weighted alternative.

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.