> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/web-elements/clickable.md).

# Clickable

For elements that do not have click events, they can be wrapped with a clickable. which effectively turns it into a button.

By default, a clickable is an empty container into which you can drag other elements.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FVrJ1uLTylxf2WHgYwGLN%2Fimage.png?alt=media&amp;token=cb35a83a-ccea-472f-8ed0-f5eb16786e1c" alt=""><figcaption></figcaption></figure>

## Properties

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FSMSgFpDeEMMhRbkE2xP4%2Fimage.png?alt=media&amp;token=ec26a391-5171-4775-885d-2f009e1e4cc1" alt=""><figcaption></figcaption></figure>

**Hover color:** Background color when mouse hovers over the clickable.

**On Hover color:** Color of text in the clickable when hovered over.

**On Active color:** Color of text in the clickable as it is being clicked.

**Animate Color:** Length of animation in milliseconds.

**Text:** Displayed text. Note that once an element is dragged into the clickable, the text will no longer be visible.

See [Tooltip](/app-builder/app-construction/elements/tooltip.md) for tooltip configurations.

## Supported Events

**Click Element:** Triggered when a user clicks on the element(s) in the clickable.

## Supported Actions

**Set Text:** Set text property of the clickable.

**Set Data:** Change element data. See [Data Store](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}