Buttons

Buttons are among the most versatile and customizable components in Adalo. They allow your users to Create and Update, or Navigate through your Adalo app with ease.

Button Settings

Each button you place in Adalo can optionally have text and/or an icon. You can easily remove the icon if you require a text-only button or choose whatever icon is appropriate for your use case. Similarly, if you remove all of the text from the button, the icon will be centered so you can have an icon-only button.

Make sure to add click actions to your buttons so they perform a function. Buttons can be used to link to new screens, update records, perform custom actions, etc.

Button Styles

Buttons are completely customizable and can be styled to match your app's unique visual theme. There are four types of buttons: Text, Outlined, Contained, and Custom. You can see examples of each below. Custom gives you the greatest amount of freedom to control every aspect of your button.

Button Styles

You can also set your text and icon size, add a shadow, change your rounding and opacity, enable a hover effect, and enable/disable automatic uppercase text. Note that the hover effect is automatic based on the colors you've chosen. You cannot customize the effect beyond enabling or disabling it. Hover effects will only apply to buttons when viewed on desktop devices on the web.

Button text size options

Setting Additional Button States

To show different buttons based on various scenarios, enabled Additional State 1 and/or Additional State 2. It's important to understand when each state will show. Here's the breakdown of how it works:

• The settings in the "Button" accordion will show by default.

• Additional State 1 will override the default button styles if the logic you set evaluates to True when the user views the screen

• Additional State 2 will override BOTH the default state and Additional State 1 if the logic you set evaluates to True when the user views the screen.

Buttons can have three unique states

Let's look at an example. Below, I have my default state, an additional state if the class is full, and an additional state if the user is already enrolled in the class. In this case, if the class is full and the user is enrolled, the "Enrolled" state will show since it is in Additional State 2, which overrules Additional State 1.

Setting up a button state