# 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="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZnVzrugiVWNIORtCCQYM%2F2023-11-13_14-29-57.png?alt=media&#x26;token=26eff8e7-3d4e-4c0e-bf41-9af78984b4a8" 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 %}