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.

Here's an example of how you can use a Button widget in your project:

First, add the Button widget, move to the Properties Panel > Button Text > Text, and provide the text to be displayed on the button.
You can resize the button using the handles displayed inside the button.

Adding icon to button

To add an icon before the text of the button:

Select the Button widget, move to the Properties Panel > find the Icon property > Click on the None > search and select the icon.
1. You can also customize the icon's size and color.
To adjust the space around the icon, use the Icon Padding property.

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing button size

To change the height and width of the Button:

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 background color

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

Adding border

See how to add a border.

Changing elevation

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.

Styling the text

See how to style a text.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Disable button

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.

To disable a button:

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.
Using the Disabled Color and Text Color properties, you can customize how the button will look in a disabled state.

Change button style on hover

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.