Buttons
Use the koala-btn tag helper
on <button> and
<a> elements.
Supports colours, variants, and composition with koala-loading.
Filled colours
The default variant is Filled. Each colour serves a specific purpose.
<button koala-btn="Primary">Save changes</button> <button koala-btn="Secondary">New partner</button> <button koala-btn="Neutral">Cancel</button> <button koala-btn="Danger">Delete</button>
Outlined variant
Use koala-btn-variant="Outlined"
for destructive triggers like "Cancel quote" or "Disable partner".
<!-- Filled (confirm action) --> <button koala-btn="Danger">Yes, delete</button> <!-- Outlined (trigger action) --> <button koala-btn="Danger" koala-btn-variant="Outlined">Cancel quote</button>
Links as buttons
The tag helper works on <a> elements too.
Use for navigation actions like "New quote" in page headers.
<a href="/partner/quotes/create" koala-btn="Primary">New quote</a> <a href="/partner/partners/create" koala-btn="Secondary">New partner</a> <a href="/partner/quotes" koala-btn="Neutral">Back</a>
Loading state
Add koala-loading to submit buttons.
The tag helper auto-adds a spinner SVG, click guard, and disabled styling to prevent double-submits.
On click, the button shows a spinner and becomes disabled until the form response completes.
<!-- Just add koala-loading — the tag helper handles everything --> <button type="submit" koala-loading koala-btn="Primary">Save changes</button> <button type="submit" koala-loading koala-btn="Danger">Confirm</button>
The koala-loading tag helper automatically injects Alpine.js
x-data, a click guard to prevent double-submits,
opacity and disabled styling while loading, and a spinner SVG that replaces the button text. It resets when the form response arrives.
Exceptions: search buttons, sign out buttons, and instant-action buttons do not need spinners.
With icons
Place a <koala-icon> inside the button as child content.
Add gap-2 to the button's class to space the icon from the text.
<a href="/partner/quotes/create" koala-btn="Primary" class="gap-2">
<koala-icon name="Plus" size="Small" />
New quote
</a>
<button koala-btn="Secondary" class="gap-2">
<koala-icon name="Plus" size="Small" />
New partner
</button>
<button koala-btn="Danger" koala-btn-variant="Outlined" class="gap-2">
<koala-icon name="X" size="Small" />
Cancel quote
</button>
Responsive sizing
Use w-full sm:w-auto for buttons that go full-width on mobile
and auto-width on larger screens. Wrap in flex flex-col sm:flex-row gap-3.
<div class="flex flex-col sm:flex-row gap-3">
<button koala-btn="Primary" class="w-full sm:w-auto">Save</button>
<a href="/cancel" koala-btn="Neutral" class="w-full sm:w-auto">Cancel</a>
</div>
Colour reference
When to use each colour and variant combination.
| Colour | Variant | Used for |
|---|---|---|
| Primary | Filled | Submit, Save, Invite, Accept, Add note, header "New" links |
| Secondary | Filled | Secondary actions (New partner, New revision, Add branch) |
| Neutral | Filled | Cancel, No, Back, Close |
| Danger | Filled | Destructive confirm (Yes in delete/disable modals) |
| Danger | Outlined | Destructive trigger (Cancel quote, Disable partner) |