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):
Related Trigger Function(s):
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>
Related Trigger Function(s):
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>