> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-alert.md).

# AX - Alert

## Overview

**AX - Alert** is a Lightning App Builder component that displays important messages directly on your record, app, and home pages.

Use it to show system alerts, error messages, warnings, or status updates that users need to see. You control when alerts appear, what they say, and how they look—all configured right in App Builder without code.

### Getting Started

Use this simple tutorial to learn the basics of the Alert component and start building your use cases.

{% @arcade/embed url="<https://app.arcade.software/share/Z7uCI2YxfnAY69emHnRP>" flowId="Z7uCI2YxfnAY69emHnRP" %}

### Key features

* **Variant Styles:** Choose from four semantic variants—base, error, offline, warning—to match message severity.
* **Icon Support:** Add any SLDS icon to reinforce the alert's meaning.
* **Dismissible:** Let users close the alert with a built-in dismiss button.
* **Textured Background:** Add a textured background for extra visual emphasis.
* **Dynamic Bindings:** Use `{{Record.FieldApiName}}` in Content on Lightning Record Pages to pull live field data.

### Use Cases

* **Opportunity Page:** Alert users to missing fields or pending approvals before stage advancement.
* **Case Page:** Show errors when SLAs are breached or key data is missing.
* **Custom Object Page:** Notify users of restricted access or pending validations.
* **System Status Panel:** Alert to platform outages or connectivity issues with the Offline variant.
* **Daily Announcements:** Share company-wide reminders or policy changes.
* **Compliance Notices:** Display role-specific compliance alerts.

***

## Configuration

Add the Alert component to a Lightning page in App Builder, then configure it in the Properties Panel.

### Properties

| Label       | Type    | Default | Required | Description                                                                                                                                                                                        |
| ----------- | ------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Variant     | String  | `base`  |          | Controls the alert's visual style and semantic tone. Valid values: base, error, offline, warning. Use it to match message severity to UI emphasis. Options: `base`, `error`, `offline`, `warning`. |
| Content     | String  | —       |          | The main message text displayed inside the alert. Can include plain or formatted text depending on implementation.                                                                                 |
| Icon Name   | String  | —       |          | SLDS icon name (e.g., utility:warning) displayed next to the alert content to reinforce its meaning visually. Example: utility:error for error alerts, utility:warning for warning alerts.         |
| Dismissible | Boolean | —       |          | If true, displays a close button so users can dismiss the alert. Useful for temporary or one-time messages.                                                                                        |
| Textured    | Boolean | —       |          | If true, adds a textured background to the alert for improved visual emphasis and separation from other page elements.                                                                             |

### Variant Guidelines

| Variant | Use Case                                          | Recommended Icon  |
| ------- | ------------------------------------------------- | ----------------- |
| base    | Neutral info (e.g., tips, status updates).        | `utility:info`    |
| error   | Blocking issues (e.g., save errors, permissions). | `utility:error`   |
| offline | Connectivity problems (e.g., network issues).     | `utility:offline` |
| warning | Cautionary alerts (e.g., missing fields).         | `utility:warning` |

*Note:* Dynamic values (e.g., {{Record.FieldName}}) are supported only on Lightning Record Pages to pull field data at runtime.

***

## Use Case Examples

### Example 1: Add a Conditional Alert for Missing Opportunity Amount

{% @arcade/embed url="<https://app.arcade.software/share/a07ViQCBBVNEnnDxooam>" flowId="a07ViQCBBVNEnnDxooam" %}

**Scenario** : Create a general reminder alert that encourages sales reps to maintain complete opportunity records by ensuring critical fields like Amount and Close Date are populated.

**Prerequisites**

* Create a checkbox formula field on Opportunity to evaluate as true when the opportunity Amount is empty `AmountIsEmpty__c`

{% stepper %}
{% step %}

#### **Configure the AX - Alert Component on your Opportunity page**

* **Variant**: `warning` (yellow warning styling)
* **Content**: `Key fields are missing. Please complete the Amount to ensure accurate pipeline reporting.`
* **Icon Name**: `utility:warning` (warning triangle icon)
* **Dismissible**: `false` (users cannot close the alert)
* **Textured**: `true` (enhanced visual styling - optional)
  {% endstep %}

{% step %}

#### **Set Up Conditional Display**

**Optimize Display with Visibility Rules**: Utilize Lightning Page's "Set Component Visibility" feature to control when the alert appears, tailored to your specific business needs. This ensures the alert is shown only in relevant situations rather than on every page

* For this use case, set the rule to AmountIsEmpty = True
  {% endstep %}

{% step %}

#### **Save & review**

{% endstep %}
{% endstepper %}

**Result:** Users see a textured warning alert on the Opportunity page.

### Example 2: Set dynamic alerts on Opportunities

Display different messages with styling and component visibility to make alerts more dynamic. Create a two level alert to illustrate varying field importance.

{% @arcade/embed url="<https://app.arcade.software/share/yMlQKsRK0cXMq9e2ESPJ>" flowId="yMlQKsRK0cXMq9e2ESPJ" %}

{% stepper %}
{% step %}

#### **Configure the first AX - Alert Component on your Opportunity page**

* **Variant**: `warning` (yellow warning styling)
* **Content**: `Key fields are missing. Please complete the Amount to ensure accurate pipeline reporting.`
* **Icon Name**: `utility:warning` (warning triangle icon)
* **Dismissible**: `false`
* **Textured**: `true` (enhanced visual styling - optional)
  {% endstep %}

{% step %}

#### Configure the second AX - Alert Component

* **Variant** : `error` (red alert styling)
* **Content** : `Key fields are missing on the Account. Complete the Account Number for billing.`
* **Icon Name** : `utility:error`
* **Dismissible** : `false`
* **Textured**: `true` (enhanced visual styling - optional)
  {% endstep %}

{% step %}

#### **Set Up Conditional Display**

* First Alert Component
  * Set the display rule to Description = empty
* Second Alert Component
  * Display the component if Record > Account > Account Number is empty
    {% endstep %}

{% step %}

#### Save & review

{% endstep %}
{% endstepper %}

***

## Key Considerations

* **Variant Selection:** Choose the variant based on message urgency (e.g., error for critical issues).
* **Dynamic Content:** Use {{Record.FieldApiName}} on Record Pages for real-time data (e.g., {{Record.Name}}).
* **Visibility Control:** Pair with Set Component Visibility to show alerts conditionally.
* **Performance:** Keep Content concise to avoid page load delays.
* **Accessibility:** Ensure text contrasts with the background; test with screen readers.

***

## Troubleshooting Common Issues

* **Alert Not Showing:** Verify the component is added to the page and Variant is set. Check page permissions.
* **Dynamic Content Fails:** Ensure the field API name (e.g., {{Record.Amount}}) matches the object and is accessible.
* **Dismiss Not Working:** Confirm Dismissible is set to `true` in the Properties Panel.
* **If Issues Persist:** Contact our support team at <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-alert.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.