> 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/experience-cloud/experience-cloud-es/experience-components/ax-alert.md).

# AX - Alert

## Resumen

**AX - Alert** es un componente de Experience Cloud que muestra mensajes y notificaciones importantes a los usuarios del portal en las páginas de Experience Sites.

Úsalo para mostrar alertas del sistema, mensajes de error, advertencias, confirmaciones de éxito o anuncios urgentes. Controla cuándo aparecen las alertas, qué dicen y cómo se ven; todo configurado en Experience Builder sin código.

Perfecto para avisos de mantenimiento del portal, confirmaciones de envío de formularios, alertas de estado de la cuenta o para guiar a los usuarios a través de procesos en portales de clientes o socios.

<figure><img src="/files/29df6c367f5be9c061498ff3de9ed18678d09616" alt=""><figcaption></figcaption></figure>

***

## Configuración

{% tabs %}
{% tab title="🎛️ Propiedades" %}

<table><thead><tr><th width="183">Atributo</th><th>Descripción</th></tr></thead><tbody><tr><td><strong>Variante</strong></td><td><p>El atributo 'variant' te permite personalizar la apariencia del componente Avonni Alert para reflejar mejor el tipo de alerta que estás transmitiendo. Las variantes disponibles incluyen:</p><ul><li><strong><code>error</code></strong>: Para notificaciones o problemas críticos.</li><li><strong><code>base</code></strong>: Una alerta estándar de propósito general.</li><li><strong><code>sin conexión</code></strong>: Indica problemas de conectividad o disponibilidad.</li><li><strong><code>advertencia</code></strong>: Para alertas que requieren atención pero no son críticas.</li></ul><p>Elige una variante que se alinee con el mensaje que deseas transmitir para una comprensión más clara por parte del usuario.</p></td></tr><tr><td><strong>Contenido</strong></td><td>El atributo 'content' especifica el mensaje principal o la información que deseas transmitir en el componente Avonni Alert. Contiene el texto que se mostrará dentro de la alerta, asegurando que los usuarios estén informados o al tanto de la notificación o situación específica.</td></tr><tr><td><strong>Nombre del icono</strong></td><td>El atributo 'icon name' te permite establecer un icono específico para el componente Avonni Alert. Al proporcionar un nombre de icono, puedes representar visualmente la naturaleza o el contexto de la alerta, mejorando la claridad y llamando de inmediato la atención del usuario sobre el mensaje.</td></tr><tr><td><strong>Tamaño del icono</strong></td><td><p>El atributo 'icon size' en el componente Avonni Alert controla el tamaño del icono:</p><ul><li><strong>Xxs</strong>: Extra-extra pequeño para un énfasis sutil.</li><li><strong>Xs</strong>: Extra pequeño para una presencia mínima.</li><li><strong>Pequeño</strong>: Un tamaño modesto para una visibilidad moderada.</li><li><strong>Mediano</strong>: Tamaño estándar para una visibilidad equilibrada.</li><li><strong>Grande</strong>: Para el máximo impacto visual</li></ul></td></tr><tr><td><strong>Es descartable</strong></td><td>El atributo "Is Dismissible" permite a los usuarios cerrar o descartar la alerta Avonni en la interfaz. Cuando se activa, aparece un botón de cierre en la alerta, lo que permite al usuario eliminarla manualmente.</td></tr></tbody></table>
{% endtab %}

{% tab title="🎨 Estilo" %}

<table><thead><tr><th width="183">Atributo</th><th>Descripción</th></tr></thead><tbody><tr><td><strong>Espaciado</strong></td><td><p>La configuración de estilo de espaciado en el componente Avonni Alert te permite ajustar los márgenes:</p><ul><li><strong>Inicio del bloque</strong>: Establece el margen superior.</li><li><strong>Fin del bloque</strong>: Ajusta el margen inferior.</li><li><strong>Inicio en línea</strong>: Configura el margen izquierdo.</li><li><strong>Fin en línea</strong>: Modifica el margen derecho</li></ul></td></tr><tr><td><strong>Fondo</strong></td><td><p>La configuración de estilo de fondo en el componente Avonni Alert ofrece personalización del fondo:</p><ul><li><strong>Color</strong>: Selecciona un color sólido para el fondo.</li><li><strong>Degradado lineal</strong>: Elige esta opción para un efecto de degradado dinámico y visualmente atractivo</li></ul></td></tr><tr><td><strong>Texto</strong></td><td><p>La configuración de estilo de texto en el componente Avonni Alert permite personalizar el texto:</p><ul><li><strong>Color</strong>: Cambia el color del texto para mejorar la visibilidad.</li><li><strong>Peso de fuente</strong>: Elige el peso de la fuente para darle énfasis.</li><li><strong>Alineación horizontal</strong>: Selecciona la alineación del texto para una visualización óptima en la alerta</li></ul></td></tr><tr><td><strong>Borde</strong></td><td><p>La configuración de estilo del borde en el componente Avonni Alert ofrece opciones para personalizar el aspecto del borde:</p><ul><li><strong>Color</strong>: Elige un color para el borde.</li><li><strong>Tamaño</strong>: Selecciona el grosor del borde.</li><li><strong>Estilo</strong>: Determina el aspecto general con varios estilos</li></ul></td></tr><tr><td><strong>Icono</strong></td><td><p>La configuración de estilo del icono en el componente Avonni Alert permite varias personalizaciones de la apariencia del icono:</p><ul><li><strong>Color de fondo</strong>: Cambia el color de fondo detrás del icono.</li><li><strong>Color de primer plano</strong>: Cambia el color principal del icono.</li><li><strong>Icono de cierre en primer plano</strong>: Especifica el color del icono para cerrar la alerta.</li><li><strong>Utilidad de color de primer plano</strong>: Realiza ajustes de color adicionales para mejorar la visibilidad y el contraste</li></ul></td></tr></tbody></table>

{% hint style="info" %}
algunos atributos de estilo pueden ser dinámicos....
{% endhint %}
{% endtab %}
{% endtabs %}


---

# 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/experience-cloud/experience-cloud-es/experience-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.