Button
A Button component with a solid background and a label.
Adding a Button
To add a Button on the screen:
- Select the Button component from the Components drawer. You can open the list of components by clicking the
+
button next to Components. - Select the added component in the Components tree.
- Go to the Config tab (third tab) in the Properties Panel to add a label on the button.
Configuration Properties
Property | Description |
---|---|
Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Button. |
Active Opacity | Allows you to set opacity of the button when active. |
Delay Long Press | Allows you to set duration (in milliseconds) from onPressIn before onLongPress is called. |
Disabled Opacity | Allows you to set opacity of the button when disabled. |
Hit slop | Allows you to set additional distance outside of element in which a press can be detected |
Icon | Allows you to select an icon from the icon picker to be displayed on the Button (Icon will be on the left of the Label). |
Data
Property | Description |
---|---|
Loading | Display a loading indicator in the button in lieu of the icon. |
Disabled | Removes button functionality and grays out the label and icon. |
Triggers
Trigger | Description |
---|---|
On Press | Starts the action when the element is pressed. |
On Long Press | Starts the action when the element is long pressed. |
Adding an icon to the Button
An Icon on the Button component is displayed on the left and before the label. To add an Icon:
- Select the Button component in the Components tree.
- Go Configs tab (second tab) in the Properties Panel.
- Next to the Icon property, open the Icon Picker and select an icon.
Changing Button Dimensions
To change the width and height of the Button:
- Select the Button component in the Components tree.
- Go Styles tab (first tab) in the Properties Panel > Size.
- Set a value for width and height.
- There are two ways to set these dimensions:
- To set an exact size, select the pt (default) and enter desired values.
- To set the dimensions as a % of the screen size, select % instead of pt and enter the desired values.
Changing Border Radius on a Button
To add or change the Border Radius on a Button:
- Select the Button component in the Components tree.
- Go Styles tab (first tab) in the Properties Panel > Borders.
- Add a desired value for the Radius property. By default, the value is
8
.
Changing the Background
To add or change the background color of a Button:
- Select the Button component in the Components tree.
- Go Styles tab (first tab) in the Properties Panel > Background.
- Add a desired value for the Color property from the color picker or enter a custom color value in hexadecimal or rgba format.
Changing the Icon and Label color
To add or change the color of Icon or Label on a Button:
- Select the Button component in the Components tree.
- Go Styles tab (first tab) in the Properties Panel > Style.
- Add a desired value for the Color property from the color picker or enter a custom color value in hexadecimal or rgba format.
Under Style, you can also change the font and font size of the label and the icon.
Updated about 1 month ago