Links

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 (
).
Icon Button

Adding IconButton widget

Here's an example of adding and customizing the IconButton widget:
  1. 1.
    ​Add the IconButton widget.
  2. 2.
    See how to change its icon, size, and color.
  3. 3.
    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.
Adding IconButton widget

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.
Show loading indicator

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.
Disabling the icon button until the user has entered the project name
To disable an icon button:
  1. 1.
    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.
  2. 2.
    Using the Fill Color and Icon Color properties, you can customize how the button will look in a disabled state.
Disabling icon button

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.
Changing icon button color on hover
Color options to change on hover

Set color dynamically

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

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 modified 1mo ago