# Buttons

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

<figure><img src="/files/8YZe0jcOE8wzN8fPknwh" alt=""><figcaption><p>Button Styles</p></figcaption></figure>

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.&#x20;

<figure><img src="/files/fYppd3vPd4YrR9QuWwgU" alt=""><figcaption><p>Button text size options</p></figcaption></figure>

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

<figure><img src="/files/OMsG84gYusDeiJzDvKcq" alt=""><figcaption><p>Buttons can have three unique states</p></figcaption></figure>

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.&#x20;

<figure><img src="/files/WZpqDjWzkpszfuy3kWiA" alt=""><figcaption><p>Setting up a button state</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/component-basics/buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.