Version: latest

Button

<Button> on lumin

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

import React from 'react';
import { View, Button, Prism, Scene } from 'magic-script-components';
export default class MyApp extends React.Component {
constructor(props) {
super(props);
}
buttonClickHandler = event => {
console.log('Hello from buttonClickHandler');
};
render() {
return (
<Scene>
<Prism size={[1, 1, 0.2]} >
<View>
<Button
localPosition={[0, 0.25, 0]}
height={0.1}
onClick={this.buttonClickHandler}
roundness={0}
textSize={0.05}
width={0.3}
>Square</Button>
<Button
height={0.1}
onClick={this.buttonClickHandler}
roundness={1}
textSize={0.05}
width={0.3}
>Rounded</Button>
<Button
localPosition={[0, -0.25, 0]}
height={0.1}
onClick={this.buttonClickHandler}
roundness={0.5}
textColor={"yellow"}
textSize={0.05}
width={0.3}
>Yellow</Button>
</View>
</Prism>
</Scene>
);
}
}

Common Events:

  • onActivate
  • onPressed
  • onLongPress
  • onRelease
  • onHoverEnter
  • onHoverExit
  • onHoverMove
  • onEnabled
  • onDisabled
  • onFocusGained
  • onFocusLost
  • onFocusInput
  • onUpdate
  • onDeleted
  • onEvent
  • onUpdateLoop

Create Properties

NameTypeDefault ValueRequiredDescription
textstringn/aNThe UTF-8 encoded text to set the initial value of the button label.
widthnumber0NThe width of the button, 0 for default.
heightnumber0NThe height of the button, 0 for default.
roundnessnumber1.0NThe 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

NameTypeDefault ValueDescription
iconColorvec4[0.75, 0.75, 0.75, 1.00]Sets the RGBA color of the button icon.
iconSizevec2[0.04, 0.04]Sets the button icon size in scene units.
textstringn/aSets the UTF-8 encoded button text.
textColorvec4[0.75, 0.75, 0.75, 1.00]Sets the RGBA color of the button text.
textSizenumber0.0167Sets the text size.
buttonTypestringn/aSets the type of button
labelSidestringn/aSets the position of label when buttonType is set to icon-with-label

buttonType

NameDescription
iconshows only icon
icon-with-labelshows icon and additional label when focused
textshows only text
text-with-iconshows text with icon

labelSide

  • left
  • top
  • right
  • bottom