# Alert

<div align="left"><figure><img src="/files/ckWgwNxqIcN8uzezCiG2" alt="" width="63"><figcaption><p>Alert Element</p></figcaption></figure></div>

The **`Alert`** element as the name implies, provides a user-friendly way to provide feedback to the user or to grab the user's attention and display a message.

It is closely related to the **`Alert Dismissible`** element that offers the ability to dismiss or remove the message.

You can [edit the text](/app-editor/page-editor/editing-text.md) inside the Alert element just like other text editable elements and use the standard formatting tools in addition to created [Badged Text](/app-editor/page-editor/built-in-elements/badged-text.md).&#x20;

The Alert element inherits the font properties from the parent element chain or uses the Body font defined at the app level (in App Settings). You can customize this by using the [Custom CSS Classes](/app-editor/page-editor/page-element-settings.md#custom-css-classes) setting or by using the [Design Tab](/app-editor/page-editor/page-element-settings.md#design-tab).

{% hint style="info" %}

* You can use the Alert element inside a [Heading](/app-editor/page-editor/editing-text.md#heading) element and have it rendered in a heading style.&#x20;
* You can dynamically create an Alert element using the [Alert Text](/app-editor/page-flow/toolbox-blocks/alert-text.md) block in [Page Flow](/app-editor/page-flow.md).
  {% endhint %}

***

## Examples

The following images show examples of Alert and Alert Dismissible elements.

<figure><img src="/files/FjKrb1arPNLAw7eh8MI8" alt=""><figcaption><p>Example of Alert element using the Yellow Alert Style</p></figcaption></figure>

<figure><img src="/files/7GpFIQoChMVrUi5z4qHt" alt=""><figcaption><p>Example of Alert element using the Teal Alert Style</p></figcaption></figure>

<figure><img src="/files/rfkFDUpHaer7hH91OCL3" alt=""><figcaption><p>Example of Alert with formatted text and a <a href="/pages/ziSpSYn19ecXvAJ6xJWb">Badged Text</a> inside it.</p></figcaption></figure>

<figure><img src="/files/IrBCBYLRa4YhhSFHA89X" alt=""><figcaption><p>Example of Alert inside a <a href="/pages/PFbZwWWRuTUviYyxFQQe#heading">Heading</a> element with <a href="/pages/ziSpSYn19ecXvAJ6xJWb">Badged Text</a>.</p></figcaption></figure>

***

## Options

The [Options tab](/app-editor/page-editor/page-element-settings.md#options-tab) settings for this element are described below:

### `Alert Style`

Select from a pre-defined list of background and text colors. For any other customizations see [here](/app-editor/page-editor/page-element-settings.md).

### `Dismissible`

Marks the element as dismissible. Used by the **`Alert Dismissible`** element.


---

# 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://docs.zingy.ai/app-editor/page-editor/built-in-elements/alert.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.