Recomendado: Usa el tipo según el significado
Elige Error, Warning, Info, Success o Neutral según el estado que necesitas comunicar, no por su apariencia visual.
Alert
Los alerts comunican información relevante dentro del contexto de la página. Orientan, confirman, advierten o informan sin interrumpir el flujo.
Anatomía del componente
Cargando anatomía…
- Contenedor
- Ícono
- Contenido
- Título
- Mensaje
Propiedades y configuraciones
Variante
Elige la variante según el significado que necesitas comunicar: información, éxito, advertencia, error o un aviso neutral.
Informa algo útil que no exige acción inmediata.
Composición
El mensaje es obligatorio. Suma un título cuando el aviso necesita un resumen y el botón de cierre cuando la persona puede descartarlo.
Un mensaje breve se entiende sin título.
Tu sesión está por terminar
Tu sesión está por terminar
Cuando usarlo
Úsalo para comunicar un estado relevante del flujo que debe permanecer visible en el contexto de la página o del formulario: un recordatorio, un aviso importante, una advertencia o un error.
No lo uses para mensajes breves y temporales de feedback sobre acciones, en ese caso prefiere el snackbar.
Buenas prácticas
Recomendado: Comunica un mensaje principal
Prioriza el aviso más importante. Si el contenido es extenso considera mostrar el detalle en otra página.
Recomendado: Ubica el alert cerca de su contexto
Muéstralo próximo al contenido, acción o paso al que hace referencia.
Malas prácticas
No recomendado: No uses el tipo solo para llamar la atención
Distingue entre errores, advertencias y mensajes informativos. No elijas el color por gusto personal.
No recomendado: No agregues información redundante
Evita repetir lo mismo el título y el mensaje.
No recomendado: No acumules alerts
Evita apilar varios avisos del mismo tipo o repetir el mismo mensaje en distintos puntos.
No recomendado: No uses alert para confirmaciones efímeras
Para mensajes breves y transitorios de feedback sobre acciones del usuario, utiliza el Snackbar.
Anuncia sin interrumpir
El componente usa role="status" para anunciar el mensaje sin interrumpir el flujo de forma abrupta.
Comunica más allá del color
El significado debe entenderse por el texto y no depender solo del color o del ícono.
Oculta íconos decorativos
Los íconos que no aportan información adicional deben ocultarse de las tecnologías de asistencia.
Haz accesible el cierre
Si la alerta puede cerrarse, el botón debe tener un nombre accesible, como Cerrar alerta, y mantener foco visible.
Explica cómo resolver el error
En mensajes de error, indica con claridad qué ocurrió y qué debe hacer la persona para continuar.
Última actualización: Octubre de 2026