Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesAct & navigateButton

Button

Triggers an action. One tag taps tone, emphasis, size, shape, width and ground.

<koala-button>

Tone & emphasis

emphasis="Solid"
emphasis="Soft"
emphasis="Outline"
emphasis="Ghost"
emphasis="Plain"

Size

Shape & icon

Split button

Popover button

States

Default
Selected
Loading
Disabled

Width

On a brand band

Hold to confirm

hold, no form — dispatches hold-complete
Shares it and lets Joey read it
Danger tone, shorter hold
A set of alternative answers, stacked
Two documents, same name
This file won't be uploaded

Fired. Let go early instead and the fill drains with a shake — nothing is posted.

API

tone PrimarySuccessDangerWarningInfoNeutral
emphasis SolidSoftOutlineGhostPlain
size XsSmMdLg
shape RoundedPillCircle
width AutoBlock
on-surface PageContainerInverseBrandBand
icon IconName
icon-position LeadingTrailingOnly
loading bool
selected bool
disabled bool
href URL (renders an anchor)
type buttonsubmitreset
koala-split-button label string
koala-split-button tone PrimarySuccessDangerWarningInfoNeutral
koala-split-button emphasis SolidSoftOutlineGhostPlain
koala-split-button size XsSmMdLg
koala-split-button on-surface PageContainerInverseBrandBand
koala-split-button type buttonsubmitreset
koala-split-button form form id
koala-split-button href URL (renders an anchor)
koala-split-button koala-tray-link bool
koala-split-button loading bool
koala-hold-button label string
koala-hold-button done-label string
koala-hold-button hint string
koala-hold-button tone PrimarySuccessDangerWarningInfoNeutral
koala-hold-button size XsSmMdLg
koala-hold-button width AutoBlock (Block stacks the hint under a full-width button)
koala-hold-button hold-ms int (default 1200)
koala-hold-button form-action URL (omit for a client-side hold)
koala-hold-button form-target Alpine-AJAX region id
koala-hold-button form-target-push bool (history entry; off for an in-place swap)
koala-hold-button hidden-fields IDictionary<string, string>
koala-popover-button label string
koala-popover-button icon IconName
koala-popover-button tone PrimarySuccessDangerWarningInfoNeutral
koala-popover-button emphasis SolidSoftOutlineGhostPlain
koala-popover-button size XsSmMdLg
koala-popover-button width AutoBlock
koala-popover-button on-surface PageContainerInverseBrandBand
koala-popover-button disabled bool