Ui XML Reference\Button

A button which can can be hooked up to run a lua function or change a XML state on click. By default, new buttons use a padding of 12 and btn_green as their background image. This frame type has a default size of 0 and expands to fit any children. Commonly supports a child text frame as button text.

Example Usage

<Button layout="flex" width="200" height="100">
    <Text text="Button" />
</Button>

This XML produces the following UI (shown in the UI Previewer):
image

enable

Value type: boolean

Supports data binding

Description


The enabled status for the button frame, where true is enabled and false is disabled. Disabled buttons are grayed out and do not register events.

Example Usage

<Button layout="flex" width="200" height="100" enable="false">
    <Text text="Button" />
</Button>

onClick

Value type: string

Supports data binding

<Frame layout="flex" flexDirection="column">
    <!-- Declare initial state values. -->
    <State name="red" booleanValue="false" />
    <!-- Show different background images depending on the state value and flip state value when clicked. -->
    <Button bind:frameImage="'btn_' .. (state.red and 'red' or 'blue')" bind:onClick="state.red = not state.red">
        <Text text="switch color" />
    </Button>
    <Text bind:text="state.red and 'red' or 'blue'" />
</Frame>