CONTROL
Button
Buttons let users trigger actions and navigation with one clear tap.
PLAYGROUND
Configure a button
The controls bind directly to the preview. Conditional icon values resolve to a validated Solar name or an empty string without reserving icon space.
On web, desktop, Android, and iOS, Button labels stay on one line and keep their control height in narrow layouts. Let the surrounding Flex wrap or change direction when the row no longer fits.
On web, iOS, and Android, the full rendered Button surface is interactive, including its padding, label, and optional icons.
Button labels and icons are control content, not document text, so they cannot be selected on web, desktop, Android, or iOS.
Button gives visible press feedback by scaling its full surface to 0.94 while active on web, iOS, and Android. Use gesture:"none" to disable it.
Button variant:variantChoice scheme:schemeChoice size:sizeChoice loading:loadingChoice disabled:disabledChoice iconStart:{ when:startIconEnabled value:"add-circle" } iconEnd:{ when:endIconEnabled value:"alt-arrow-right" }
"Button label"Reactive loading
Bind loading to a boolean Signal or View Store path. When it is true, Button shows the bundled svg-spinners:3-dots-move Icon, keeps the content footprint, marks the control busy, and prevents another action.
Reactive disabled state
Bind disabled to a boolean Signal or View Store path. When it is true, Button keeps its scheme and variant at 0.5 opacity, preserves its layout, and blocks click or navigation on web, desktop, Android, and iOS.
SCHEMES AND VARIANTS
Every semantic color
Each row keeps one variant fixed so color families are easy to compare.
Each generated label uses the explicit braced text-binding form for its current item.
VARIANTS AND SIZES
Five control densities
API
Props
Button also accepts the applicable common spacing, sizing, typography, visibility, and accessibility props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||