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.

Adding Button widget

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 icon to button

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.

  2. To adjust the space around the icon, use the Icon Padding property.


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:

  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.

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:

  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.

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.

Show/Hide widget

See how to show or hide any widget using the Conditional Visibility property.

Responsive Visibility

See how to add responsive visibility to any widget.

Add padding & alignment

See how to add padding and alignment to any widget.

Last updated