Button

Tone & emphasis

emphasis="Solid"

emphasis="Soft"

emphasis="Outline"

emphasis="Ghost"

emphasis="Plain"

Size

Shape & icon

Split 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.

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