NUI / Components / Common

Button

ImplementedCommon / Input

Button renders an interactive command button that can be wired to behavior through the Event Graph.

Supported as a text-command button.

Overview

Button renders an interactive command button that can be wired to behavior through the Event Graph.

When to use

Primary actions.
Menu actions.
Confirmations.
Navigation commands.
Other click-driven behavior.

Children

Does not support children.

Basic syntax

nui

Button ConfirmButton {
    text: "Confirm"
    command: "ConfirmSelection"
}

Supported properties

Property	Type	Required	Default	Description
`text`	string	Yes	Empty	Button label.
`command`	string	Yes	Empty	Event Graph command name.
`enabled`	bool	No	true	Whether the button can be used.
`focusable`	bool	No	true	Whether the button can receive focus.
`font`	string	No	Project default	Label font name.
`fontSize`	number	No	14	Label text size.
`textColor`	color	No	Default	Label color.
`backgroundColor`	color	No	Default	Normal background color.
`hoveredColor`	color	No	Default	Hover background color.
`pressedColor`	color	No	Default	Pressed background color.
`disabledColor`	color	No	Default	Disabled background color.
`borderColor`	color	No	Default	Border color.
`borderThickness`	number	No	0	Border thickness.
`radius`	number	No	0	Corner radius.
`padding`	margin	No	Default	Inner label padding.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`horizontalAlign`	enum	No	Inherited	Component horizontal alignment.
`verticalAlign`	enum	No	Inherited	Component vertical alignment.
`opacity`	number	No	1	Render opacity.
`layer`	integer	No	Context default	Layer order inside layered parents.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

Button may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. See section 7.

Full syntax example

nui

Button ConfirmButton {
    text: "Confirm"
    command: "ConfirmSelection"
    enabled: true
    focusable: true
    font: "ButtonFont"
    fontSize: 16
    textColor: "#FFFFFF"
    backgroundColor: "#275DAD"
    hoveredColor: "#3976CF"
    pressedColor: "#1D467F"
    disabledColor: "#505866"
    borderColor: "#78A8E8"
    borderThickness: 1
    radius: 4
    padding: margin(8, 14, 8, 14)
    width: 160
    height: 40
    horizontalAlign: center
    verticalAlign: center
    opacity: 1
    layer: 1
    visible: true
}

Limitations

Button does not currently support manually authored child content.
Use command, not the legacy action alias, in public documentation.