PrimitivesAct & navigateButton

Button

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

Tone & emphasis

emphasis="Solid"

emphasis="Soft"

emphasis="Outline"

emphasis="Ghost"

emphasis="Plain"

Size

Shape & icon

States

Rest

Selected

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 PrimarySuccessDangerWarningInfoNeutral

emphasis SolidSoftOutlineGhostPlain

size XsSmMdLg

shape RoundedPillCircle

width AutoBlock

on-surface PageContainerInverseBrandBand

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