Icon button

The UI component Icon Button is a component which can trigger an Action. It is very similar to the Button component, but with some changes and additional properties. While a Button can contain an icon and text, an Icon Button contains just an Icon, and an optional badge.

As with a normal Button, the On Click event handler can be used to connect the component to an action, and every time a user clicks the button, the action will be triggered.

An example setup of a Button is showcased in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

Settings

Here are some of the properties in Appfarm Create which are configurable for an Icon Button:

Icon / Icon Value

Icons can be connected to the button. Icon Value can be connected to an Enum data source, if applicable. Icon is used as a fallback if Icon Value is not found.

Tab Index

If the end user navigates with the Tab key, this is the position in the queue where the Button will become focussed. The default ordering is always logically correct based on the position of components on the page, so it is recommended to leave this property blank (unless the default must be changed).

Badge

A badge can be used to display a numerical or String value to the user. For example, in an app that has shopping functionality, an Icon Button with a shopping cart icon can be configured with a Badge to display the number of items that the user currently has in their cart. An example of the badge is found in the Showroom.

The Badge is automatically hidden if the output is 0 or an empty string.

Conditional Properties

If the button's appearance should differ depending on a condition which can change over time, then using Conditional Properties is recommended. The properties, and conditions for when they should override the given default, are given in this section.

Event Handlers

Actions are configured here, and these are run each time the button is clicked.