IconButton

The IconButton widget allows users to take action with a single tap. Unlike the regular Button widget, this widget shows a small image or a symbol that represents the action to be performed when the button is clicked.

You can use this widget to let users quickly understand the meaning of an action. For example, the delete action can be easily conveyed using the trash can icon, which looks like this ( ).

Here's an example of adding and customizing the IconButton widget:

Add the IconButton widget.
See how to change its icon, size, and color.
To add and customize the border, move to the Properties Panel > Button Default Style > use the Border Color, Border Width, and Border Radius properties. See how to do it here.

Customizing

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

Show loading indicator

Displaying the loading indicator is useful when you want to indicate that the app is processing the request.

For example, when a user wants to delete a payment method, the app needs to confirm the deletion and complete the transaction. This process may take a few seconds, and the user may get impatient waiting for confirmation. To make sure that the user knows that the app is processing the deletion, you can display a loading icon on the "Delete" icon button.

To display the loading indicator, move the Properties Panel > enable Show Loading Indicator.

The loading indicator will only be displayed during actions that could take some time to return results, like API calls.

Disable icon button

You can disable/enable a button when a specific condition is met. For example, to prevent accidental deletion of a project, you can prompt the user to enter the project name before allowing them to delete it. During this process, the icon button for deleting the project can be disabled to ensure that the user does not initiate the deletion before entering the name.

To disable an icon button:

Select the IconButton widget, move to the Properties Panel > turn on the Disable > 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 Fill Color and Icon Color properties, you can customize how the button will look in a disabled state.

Change colors on hover

You might want to change the colors when the user hovers over IconButton to indicate that the button is interactable.

To change the icon button colors on hover, select the IconButton widget, move to the properties panel, and turn on the Button Hover Style. Use the properties such as Fill Color and Icon Color to customize the button's appearance.