Button

Description

Button represents a standard, clickable button that you can select and activate with the Control. You can set the label text and control the size and color of the button or use an icon. Button text uses the default system font, Lomino, and is white.

Example

class MyApp extends React.Component {
buttonClickHandler = event => {
console.log("Hello from buttonClickHandler");
};
render() {
return (
<View>
<Button
height={0.1}
localPosition={[0.4, -0.2, 0]}
onClick={this.buttonClickHandler}
roundness={0.7}
textSize={0.03}
width={0.3}
>
Click Me
</Button>
</View>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueDescription
textstringn/aThe UTF-8 encoded text to set the initial value of the button label.
widthnumber0The width of the button, 0 for default.
heightnumber0The height of the button, 0 for default.
roundnessnumber1.0The ratio of corner rounding (0-1). Use 1 for a fully rounded button, such as a circle or capsule. Use 0 for a sharp corner.

Element Properties

NameTypeDescription
iconColorvec4Sets the RGBA color of the button icon.
iconSizevec2Sets the button icon size in scene units.
textstringSets the UTF-8 encoded button text.
textColorvec4Sets the RGBA color of the button text.
textSizenumberSets the text size.