Button

The UI component Button is a component which can trigger an Action. The On Click event handler can be used to connect the UI 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 a Button:

Icon / Icon Value

Icons can be connected to a button, which will show alongside the Label. Icon Value can be connected to an Enum data source, if applicable.

Auto Focus

A boolean value which determines if the Button will be focussed when the page renders and is first shown to the user.

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).

Variant

A button can have a variant of Text, Outlined, Contained or Default. The differences between how these look are demonstrated in the Showroom LINK HERE. Buttons can also be given a default variant through Themes.

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.