Button

A press target with a label and optional icon (or one custom child).

Group: Actions · Kind: native · in the lite catalog

Preview

example

variant · secondary

variant · outline

variant · ghost

variant · destructive

variant · link

size · sm

size · default

hold · true

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Variants

size · lg

size · icon

disabled

Props

Prop	Type	Required	Bindable	Description
`label`	`string`	–	yes	The button text (omit for an icon-only button).
`icon`	`icon`	–	yes	An icon before the label, or alone with size `icon`.
`variant`	`default \| secondary \| outline \| ghost \| destructive \| link`	–	–	`default` = the primary action, `destructive` = dangerous, `ghost`/`link` = quiet. Default `"default"`.
`size`	`sm \| default \| lg \| icon`	–	–	Control height class; `icon` is a square icon-only button. Default `"default"`.
`disabled`	`boolean`	–	yes	Shows it inert. Default `false`.
`loading`	`boolean`	–	–	Pending: refuses presses, then shows a spinner. Default `false`.
`pendingLabel`	`string`	–	–	Label while loading.
`submit`	`boolean`	–	–	Submits the enclosing Form on press. Default `false`.
`hold`	`boolean`	–	–	holdStart/holdEnd/holdCancel, no press. Default `false`.
`holdingLabel`	`string`	–	–	Label while held.

Events

on.press: runs an action
on.holdStart: runs an action
on.holdEnd: runs an action
on.holdCancel: runs an action

Slots

None.

Children

one

A2UI basic mapping

The basic catalog’s Button renders as Button.

Built from

A native component: every renderer paints it directly.

Accessibility

Role: button

button (aria-busy while loading); hold: still a button, Space/Enter key-down starts the hold, key-up ends it, Escape or blur cancels it

Keys	Action
`Enter` `Space`	press
–	A `submit` button submits the enclosing Form

Theming

Recipe parts: Button/root Button/icon Button/label Button/spinner

Keyed by: variant size disabled loading :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

SplitView · AppBar · Plan · Pagination · Breadcrumb · AlertDialog · Chip · EmptyState