Uso
Cuándo usar
- Para mensajes de alta prioridad que informen sobre el estado en funcionamiento de una acción o del sistema.
- Para proporcionar información complementaria dentro del contexto del contenido de la página y guiar a los usuarios a tomar decisiones informadas.
Cuándo no usar
- Cuando la información no es crítica ni afecta el flujo de la tarea del usuario. En esos casos, es preferible usar texto informativo dentro del contenido.
- Para notificar sobre situaciones externas al contexto de la página o del sistema, por ejemplo, alertas meteorológicas o estado del transporte público. En estos casos recomendamos usar el componente Banner.
- Para mensajes de retroalimentación efímeros, como "copiado al portapapeles".
- Cuando se busca llamar la atención sobre contenido promocional o campañas. Las alertas están orientadas a mensajes funcionales o de sistema, no a fines publicitarios.
Tipos
Alerta del sistema
Informan sobre el estado del sistema o de procesos en curso, por ejemplo, "el sistema de pagos se encuentra en mantenimiento". En general se muestran en áreas visibles del contenido para llamar la atención de la persona usuaria sin interrumpir su flujo de trabajo.
Alerta de contexto
Se utilizan para detallar información relacionada al contenido de una página y ayudar a las personas usuarias a tomar decisiones informadas. Son parte del propio flujo informativo y no pueden descartarse. A diferencia de otros tipos de notificación, no son activadas por una acción del usuario ni por el sistema, sino que se cargan junto con el contenido. Por ejemplo, "Estas variables están disponibles sólo en Figma. No están disponibles en el código."
Estados de alerta
Cada estado de alerta se asocia con un color e icono específicos que expresan el significado del mensaje que se quiere trasmitir. No sugerimos el uso del color como único medio para trasmitir el mensaje, recomendamos complementar el significado con el texto descriptivo e íconos adecuados.
Estado de notificación para el componente Alertas.
| Tipo | Uso | Color |
|---|---|---|
| Informativa | Para proporcionar información adicional que no requiere acción inmediata. | Azul |
| Éxito | Para confirmar que una acción ha sido exitosa. | Verde |
| Advertencia | Para advertir a la persona usuaria sobre errores del sistema y que pueden, o no, requerir una acción inmediata. | Naranja |
| Error | Para alertar a la persona usuaria sobre la ocurrencia de errores o problemas del sistema que requieren una acción inmediata. | Rojo |
Jerarquías
Contraste bajo para alertas contextuales de la página de baja prioridad; contraste alto para alertas del sistema de alta prioridad.
Jerarquía de notificación según la gravedad del mensaje.
Disposición
Alertas del sistema
Se ubican en la parte superior del contenido principal y pueden extenderse a lo ancho del contenedor o adaptarse a una sección específica, manteniendo la alineación con la cuadrícula
Alertas de contexto
Se posicionan junto al elemento o contenido al que se refieren, como formularios, filtros o secciones de texto, garantizando que la relación entre ambos sea clara.
En mobile, las alertas se ubican sobre el contenido principal y ocupan el ancho total de la grilla del dispositivo.
Contexto de uso
Para notificar sobre el mantenimiento del sistema
Se utiliza para informar a las personas usuarias sobre interrupciones temporales, tareas de mantenimiento o limitaciones del sistema. Ayuda a establecer expectativas claras y evitar confusiones o intentos fallidos de uso.
Para comunicar restricciones o requisitos previos
Sirve para informar condiciones que deben cumplirse antes de iniciar o completar una acción, evitando frustraciones o errores. No interrumpe la experiencia, pero brinda orientación relevante.
Para validar campos en formularios
Permite alertar sobre errores, datos incompletos o inconsistentes en campos específicos, ayudando a la persona usuaria a corregirlos antes de continuar. Deben ubicarse cerca del campo afectado.
Contenidos
Título
El título tiene que ser breve y descriptivo, explicando la información más importante y la longitud no debe exceder los 80 caracteres o equivalente a 1 línea de texto en dispositivos desktop. Por ejemplo, "La base de datos se está actualizando"
Descripción
La descripción debe proporcionar detalles adicionales o instrucciones claras para ayudar a la persona usuaria a comprender la situación y tomar las medidas necesarias. La longitud de la descripción no debe exceder los 320 caracteres, de lo contrario, el componente va a cortar el contenido.
Enlaces
Los enlaces describen con precisión lo que se encontrará al clickearlos, priorizando que las primeras palabras transmitan el propósito del enlace rápida y claramente. Por ejemplo, "Conocer la normativa".
Para más información podes consultar la ficha de enlaces
Listas descriptivas
La lista debe tener una longitud máxima de 5 ítems para evitar sobrecargar visualmente la alerta.
- Evitar incluir enlaces o acciones dentro de los ítems, ya que esta variante está orientada a la lectura, no a la interacción.
- Se pueden utilizar listas ordenadas o desordenadas según el tipo de contenido:
Ordenada: cuando el orden tiene sentido lógico (por ejemplo, pasos de un proceso).
Desordenada: cuando se trata de ítems informativos sin jerarquía. - Utilizar frases cortas, claras y en tono informativo o instructivo, por ejemplo, "Revisá la documentación antes de comenzar el trámite." o "Tené a mano una copia del comprobante."
Listas de enlaces
La lista debe presentarse en orden lógico o visual, siguiendo la disposición del formulario, y cada ítem debe ser un enlace interactivo que lleve el foco directamente al campo con error.
- Los mensajes deben ser claros, breves y orientados a la acción, por ejemplo, ingresá tu número de documento.
- Evitar tecnicismos o expresiones negativas ("error grave", "incorrecto"), priorizando un tono guía e informativo.
- En el caso de haber un mensaje de error individual debe mantenerse visible junto al campo correspondiente.
