# AX - Alerta

## Descripción general

**AX - Alerta** 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 sensibles al tiempo. 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>

***

## Ajustes

{% 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 preocupaciones de conectividad o disponibilidad.</li><li><strong><code>advertencia</code></strong>: Para alertas que necesitan 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 contenido textual 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 captando inmediatamente la atención del usuario hacia 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 prominencia mínima.</li><li><strong>Pequeño</strong>: Un tamaño moderado para visibilidad intermedia.</li><li><strong>Mediano</strong>: Tamaño estándar para 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 Avonni Alert en la interfaz. Cuando está activado, aparece un botón de cierre en la alerta, permitiendo su eliminación manual por parte del usuario.</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 telón de 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 dinámico y visualmente atractivo de degradado</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 la personalización del texto:</p><ul><li><strong>Color</strong>: Cambia el color del texto para mejorar la visibilidad.</li><li><strong>Peso de la fuente</strong>: Elige el grosor de la fuente para dar é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 de borde en el componente Avonni Alert ofrece opciones para personalizar la apariencia 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 una mejor visibilidad y contraste</li></ul></td></tr></tbody></table>

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


---

# 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.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-alerta.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.