Gobierno de España Dintel Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Fundamentos Componentes Módulos Plantillas Tokens Soporte

Alerta

Las alertas son notificaciones directas con los usuarios, se utilizan para dar feedback urgente de algo que esta sucediendo en la aplicación. Pero también pueden ser molestas si se usan en momentos inadecuados o en exceso.

Vista Previa

Figma
Vista previa del componente alerta

Usos

En general, es importante usar alertas en una interfaz de manera estratégica y considerando el contexto de uso. Una buena práctica es limitar el número de alertas mostradas y permitir al usuario controlar la frecuencia o las notificaciones.

Cuándo usar

Cambios de estado o actualizaciones importantes. Confirmación de una acción específica. Eventos en segundo plano que se han finalizado o se ha producido un problema.

Cuándo no usar

No es una situación importante o urgente. La información puede ser mostrada de manera menos intrusiva, como en un estado de la interfaz o en una barra de estado. Puede molestar al usuario o interrumpir su flujo de trabajo Se usan demasiadas alertas, lo cual puede causar que el usuario las ignore

Comportamiento

El componente alerta aparece integrado en el contenido e implica un aviso que puede desaparece automáticamente tras un periodo de tiempo o mediante click del usuario.

Escogeremos el tipo de alerta en función del tipo de aviso: error, información, éxito o alerta. Utilizaremos las alertas siempre y cuando sea necesario, sin saturar de información al usuario.

En el mensaje mostraremos la información precisa de lo que está ocurriendo, adaptándose a la situación particular en cada caso.

Tipos

Simple
With title
With link
Close

Estados

Visualización del componente alerta en estado informativo
Info
Visualización del componente alerta en estado advertencia
Warning
Visualización del componente alerta en estado error
Error
Visualización del componente alerta en estado exitoso
Success

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente

Las alertas de peligro y advertencia tienen definido un role="alert" que garantiza que las tecnologías de asistencia las anuncien cuando aparezcan. Las variaciones de las alertas por defecto y de éxito tienen definido un role="status". Esto garantiza que se lean después de las alertas de peligro y advertencia. Las alertas utilizan además tabindex="0" para que sea posible acceder a ellas con la tecla tabulador o mover el foco a ellas mediante programación. A través de la propiedad h-size el desarrollador puede elegir la etiqueta de encabezado apropiada para el título de la alerta El aspa de cierre tiene role="button" además de la propiedad aria-label.