← Interface components

UI.Button

luastra/ui
UI.Button(input: Input): Node

Creates an accessible native action with pointer, touch, keyboard, disabled, busy, pressed, selected, appearance, and bounded icon semantics. Busy actions are disabled so repeated activation cannot duplicate work.

Mental model

This is a declarative node: app.render describes it again from current state, while the host matches its stable id to the existing view.

Before you use it

Add luastra/ui to this module's dependencies in luastra.json, then import it with require("luastra/ui"). The project must declare the ui.render capability. app.render must return one UI.Screen root; place this node inside that tree rather than invoking it for a hidden side effect.

How it fits

The constructor validates its fields immediately and returns a UI.Node. After app.render returns, the host reconciles that node by stable id with the current semantic DOM-based interface. Current desktop and mobile hosts package the same web artifact; native adapters are used at capability boundaries.

When to use it

Use UI.Button when the user initiates an operation or changes application state. Icon-only buttons require a descriptive label. Use pressed for a toggle and selected for the current navigation destination, never both.

Shared parameter groups

actiontext-stylesemantic

Parameters

ParameterType / valuesDescription
idlowercase path, requiredUnique ID.
textstring?Visible button label; may be omitted when icon and label are provided.
iconbounded icon name?Host-rendered semantic icon. An icon-only button requires label.
pressed / selectedboolean?Mutually exclusive toggle or current-navigation state.
onTapaction string, requiredAction delivered to app.handle after activation.
textStyleUI.TextStyle?Local packaged font and bounded size, weight, lineHeight and fallback. Requires the 0.3 source SDK; omitted fields retain defaults.
paddingnone | xs | sm | md | lg | xl | responsiveAll-side inner spacing; responsive is supported only by padding. Group: Layout and surfaces.
marginnone | xs | sm | md | lg | xlAll-side outer spacing. Group: Layout and surfaces.
paddingX / paddingYnone | xs | sm | md | lg | xlAxis-specific inner spacing. Group: Layout and surfaces.
paddingTop / paddingBottom / paddingStart / paddingEndnone | xs | sm | md | lg | xlLogical side-specific inner spacing. Group: Layout and surfaces.
marginX / marginYnone | xs | sm | md | lg | xlAxis-specific outer spacing. Group: Layout and surfaces.
marginTop / marginBottom / marginStart / marginEndnone | xs | sm | md | lg | xlLogical side-specific outer spacing. Group: Layout and surfaces.
surfaceplain | card | elevated | accentBackground, border, and elevation. Group: Layout and surfaces.
widthfull | content | wideAvailable width, 720 px maximum, or 1180 px maximum. Group: Layout and surfaces.
classNamesafe string ≤ 256 bytesAdditional admitted class tokens. Group: Layout and surfaces.
appearanceprimary | secondary | danger | ghostAction appearance. Group: State and semantics.
labelstringAccessible name. Group: State and semantics.
hiddenbooleanVisibility state. Group: State and semantics.
disabledbooleanDisabled state. Group: State and semantics.
busybooleanaria-busy state. Group: State and semantics.
textColortoken | #RRGGBBLocal or inherited foreground. Group: Text and local colors.
backgroundColortoken | #RRGGBBComponent-box background. Group: Text and local colors.
Color tokensaccent | danger | muted | surface | success | text | transparent | warningCurrent Screen theme colors. Group: Text and local colors.
motion{ [property]: Tween | Sequence }Opacity, rotation, scale, and translation channels. Group: Events and motion.

Children and layout

This component does not accept arbitrary child nodes; named parameters provide its content.

Accessibility and keyboard

Keeps native button semantics, keyboard activation, and visible focus. Do not replace it with a tappable Shape.

Common mistakes

  • Using uppercase letters or spaces in the onTap action.
  • Duplicating the same id across render branches.

Returns

Node — a validated declarative UI node that becomes part of the next host-neutral render tree.

What happens next

A validated declarative node appears after it is returned as part of the current render tree.

Failures and fixes

Invalid fields, duplicate IDs, unsupported child combinations, or a missing ui.render capability fail during check, render-tree validation, or host startup.

Availability

Source API in 0.5.0-alpha; the public installer targets 0.5.0-alpha. Verify host-specific behavior against the selected SDK.

Focused example

UI.Button {
    id = "game/start",
    text = "Start",
    appearance = "primary",
    onTap = "game.start",
    label = "Start the game",
}

Live Luastra example

Run the example to try real Luastra buttons and state inside this page.

Run this example to load Luastra. JavaScript is required.

Continue learning

Companions

UI.Field

Next steps

UI.LinkUI.ActionsUI.Modal

Complete inventory

View all pages in Interface components
← Previous: UI.TextNext: UI.Icon →