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 and nothing is posted.

Supporting controls

icon and copy actions
theme, loading and responsive navigation
Navigation is open.
destructive actions

Archive quote

Removes it from the active queue.

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