Alert

El componente Alert es un mensaje visual permanente utilizado para comunicar estados relevantes del sistema o avisos del servicio sin interrumpir abruptamente el flujo de trabajo del usuario.

Previsualización Rápida

Mantenimiento programado

El lunes 16/5 habrá un mantenimiento en el sistema desde las 02:00 hs hasta las 04:00 hs.

Facturas pendientes de pago

Tenés comprobantes próximos a vencer. Revisá tu sección de pagos para evitar recargos.

Propósito

Avisar o comunicar condiciones importantes que el usuario debe conocer mientras navega en una vista específica. Permite ofrecer contexto claro sobre cambios en la cuenta, advertencias operativas o recordatorios del sistema.

Anatomía del Componente

La estructura anatómica de la alerta contempla hasta seis elementos visuales y funcionales alineados al contenido:

Stroke (Borde): Delimitador perimetral de color semántico que brinda contraste con el fondo.
Background: Superficie de tono suave (subtle) asociada al estado de la comunicación.
Icon: Representación visual decorativa alineada al extremo superior izquierdo.
Title (Opcional): Encabezado destacado (Body Normal Strong) para resumir el propósito del mensaje.
Body Text: Texto explicativo continuo que detalla el evento o las acciones a seguir.
Button Close (Opcional): Acción de interacción secundaria para descartar la notificación de forma manual.

Anatomía Completa de una Alerta

Demostración con título opcional, cuerpo descriptivo e ícono de cierre activo.

Dimensiones y Animación

Ancho: Ocupa siempre el 100% del ancho del layout o contenedor seleccionado tanto en escritorio (Desktop) como en dispositivos móviles (Mobile). Su ancho nunca depende del largo del texto ingresado.
Alto: Se ajusta de forma flexible (hug content) según la cantidad de texto ingresado.
Sin animación de entrada: El componente carece de animaciones de entrada. Aparece directamente en la maquetación diseñada por UX y el contenedor se reacomoda de forma automática si la alerta es descartada por el usuario.

Comportamiento del Botón de Cierre (`Button Close`)

El componente ofrece la posibilidad de activar o desactivar la opción de descarte manual según la prioridad de la información:

Button Close Activo

El botón de cierre es visible y permite remover el mensaje de forma inmediata.

Casos de uso recomendados: Alertas informativas o avisos de baja prioridad (ej: “Ahora podés cambiar tu domicilio desde la app”).
Comportamiento: Al accionar el botón de cierre, la alerta se elimina de la pantalla y el layout circundante se ajusta suavemente hacia arriba.

Novedad en la plataforma

Podés descargar tus resúmenes de cuenta del último año en formato PDF.

Button Close Desactivado

El botón de cierre se desactiva y el usuario no puede remover el mensaje por sí mismo.

Casos de uso recomendados: Alertas críticas, avisos urgentes o ventanas de mantenimiento del sistema que deben permanecer visibles mientras la condición persista o sea resuelta vía backoffice.
Comportamiento: El componente se mantiene fijo en el diseño de forma permanente.

Tu contraseña está por expirar

Por motivos de seguridad, deberás actualizar tu clave de acceso en los próximos 3 días.

Variantes Semánticas

Información importante

El lunes 16/5 habrá mantenimiento programado. Verificá tus datos antes de continuar.

Acción requerida

Tu sesión caducará en 5 minutos por inactividad. Guardá los cambios realizados.

Info: Proporciona detalles adicionales, novedades o recordatorios generales.
Warning: Advierte sobre acciones potencialmente riesgosas o situaciones que requieren atención, sin bloquear el avance del usuario.
Error: Reservado para fallas o estados críticos que requieran resolución.
Success: Para la confirmación de estados positivos permanentes en un contenedor.

Alineación y Textos Extensos

Cuando la alerta contiene bloques de texto extensos o de múltiples párrafos, todos los elementos (ícono, contenido de texto y botón de cierre) mantienen una alineación superior fija para garantizar coherencia en la lectura.

Detalle histórico de la cuenta

El cuerpo de la alerta permite incorporar textos extensos sin deformar el componente. Toda la iconografía y el botón de cierre conservan la alineación con respecto a la primera línea del mensaje.

Lineamientos de Accesibilidad

Iconos decorativos: Los íconos informativos son únicamente visuales y se ocultan a la tecnología asistiva mediante aria-hidden="true".
Lectura unificada: El título y el cuerpo del mensaje deben estar estructurados dentro del mismo contenedor para que los lectores de pantalla los anuncien como un solo bloque coherente.
Botón de cierre interactivo: El ícono de cierre utiliza el atributo accesible aria-label="Cerrar notificación" y permite tomar foco mediante navegación por teclado (Tab + Enter/Space).