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

Button

Triggers an action. Its size comes from the slot it sits in: Standard (38px) for the view, Compact (30px) inside one thing on it. Solid for the action a screen exists for, Soft for a labelled action standing on its own, Ghost inside a toolbar, composer or row and for every icon-only button. A koala-button-menu inside it makes it a split button.

<button koala-button type="button">

Emphasis

emphasis="Solid"
emphasis="Soft"
emphasis="Ghost"

In context

Dialog footer: Soft beside Solid
Row actions: Ghost, the last one align-edge="End"
14 Alder Close, Harrogate

Size comes from the slot

Standard: koala-form-actions
Compact: koala-panel-actions

Documents

Shape & icon

Split button

Solid
Soft

States

Rest
Selected
Loading
Success
Disabled

Caller-owned state

x-bind:state="actionState"

Hold gesture

hold="1200" emits koala:hold

Hold with a pointer, Space, or Enter. Release early to cancel.

Caller-owned copy action

The page owns clipboard access and Success
Q-123

Width

On a brand band

API

tone Danger (unset: Solid is Primary, Soft and Ghost are neutral)
emphasis SolidSoftGhost
align-edge NoneStartEnd (icon-only Ghost)
shape RoundedPillCircle
width AutoBlock
on-surface PageContainerInverseBrandBandTint
icon IconName
icon-position LeadingTrailingOnly
state RestLoadingSuccess
x-bind:state Alpine expression owned by the caller
loading-label string (default Loading)
success-label string (default Done)
hold milliseconds; emits koala:hold on completion
selected bool
disabled bool
type buttonsubmitreset
koala-button-menu align leftright
koala-button-menu label string (default Show more {label} actions)
Open