# Notification

Notification displays a global notification message at the corner of the page.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FVNxRDaf3LAgbvYRGafoz%2Fimage.png?alt=media&#x26;token=4b6d7b08-30ba-456d-a2a8-880cba50fe35" alt=""><figcaption></figcaption></figure>

Similar to a [message](https://docs.acho.io/app-builder/app-construction/elements/web-elements/message "mention"), you can customize the notification by clicking on "Edit Notification". You will also need an interaction to trigger the notification to open.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F8WmE3Qrq2axSUmuEmEFO%2Fimage.png?alt=media&#x26;token=a83fa7d6-a4bd-4855-839f-3c35dbc1b5c5" alt=""><figcaption></figcaption></figure>

## Properties

![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FFLSMnhCl6VAUXIgAdKtJ%2Fimage.png?alt=media\&token=885f4380-e4c2-4209-be06-40cda28cd117)

**Position:** Choose to display the message on the top-right, top-left, bottom-right, or bottom-left of the screen

**Duration:** How long the notification will be displayed on the screen

**Offset top:** Offset from the top edge of the screen in pixels.

**Show close icon:** When toggled on, users will be able to close the message manually.

**Z-index:** Set the z-index of the message. See [CSS doc](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more.

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

## Supported Events

**Click Notification:** Triggered when a user clicks on the notification.

**Close Notification:** Triggered when a user closes the notification.

## Supported Actions

**Show Notification:** Display notification on the screen.

**Close Notification:** Close notification.

**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 %}