# Badge

A number or status mark over an element. Badges are typically used for buttons or icons.

By default, a badge has 2 parts: 

1. A section to insert another element.
2. The badge indicator, which is a red [text](https://docs.acho.io/app-builder/app-construction/elements/web-elements/text "mention") element.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F8cy0rTt0hlAXVepLNp2Y%2Fimage.png?alt=media&#x26;token=b63460fe-745a-42ef-b023-2173b0e74840" alt=""><figcaption></figcaption></figure>

For example, this is what it will look like when you drag a button into a badge element.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F6PnjAYQKIu01DUPCrp9c%2Fimage.png?alt=media&#x26;token=b7b7167e-b12c-4798-9a16-8e0a79e915e9" alt=""><figcaption></figcaption></figure>

## Properties

No properties. See [tooltip](https://docs.acho.io/app-builder/app-construction/elements/tooltip "mention") for tooltip configurations.

## Supported Events

No supported events.

## Supported Actions

**Set Data:** Change element data. See [data-store](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}