Comment on page
Button
The Button widget allows users to take action such as saving data, opening a new page, etc. You can use it in forms, dialogs, cards, etc.

Button
Here's an example of how you can use a Button widget in your project:
- 1.First, add the Button widget, move to the Properties Panel > Button Text > Text, and provide the text to be displayed on the button.
- 2.You can resize the button using the handles displayed inside the button.

Adding Button widget
To add an icon before the text of the button:
- 1.Select the Button widget, move to the Properties Panel > find the Icon property > Click on the None > search and select the icon.
- 1.
- 2.To adjust the space around the icon, use the Icon Padding property.

Adding icon to button
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
To change the height and width of the Button:
- 1.Select the Button widget, move to the Properties Panel > Button Default Style > enter the Width and Height value.
- 1.To set it to an exact size, select PX and enter the desired values.
- 2.To make the height or width of the image the screen's height or width, just click on the infinity icon().

Changing button size
To change the background color, move to the Properties Panel > Button Default Style > set the Fill Color.

Changing background color
To change the elevation (depth or Z-axis), move the Properties Panel > enter the Elevation value.
The higher value draws the bigger size of the shadow.

Changing elevation
You can disable a button if a specific condition is met. For example, on a login page, you could disable the "Login" button if a user has not filled in their username and password or has not agreed to the terms and conditions.

Disable a button
To disable a button:
- 1.Select the Button widget, move to the Properties Panel > turn on the Button Disable Style > click Unset, and set the Conditions. This can be the Single Condition or Combine Conditions based on your requirement. Note that the button will be disabled only when the condition(s) are true.
- 2.Using the Disabled Color and Text Color properties, you can customize how the button will look in a disabled state.

Adding conditions to disable a button.
You might want to change the button style when the user hovers over it to indicate that the button is interactable.
To change the button style on hover, select the Button widget, move to the properties panel, and turn on the Button Hover Style. Use the properties such as Fill, Border, Text Color, and Elevation to customize the button's appearance.

Button changes the color when hovered over it

Changing button hover style
Last modified 4mo ago