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

Notificación

El componente toast es una pequeña ventana emergente que se muestra normalmente en la esquina superior derecha para proporcionar comentarios inmediatos en respuesta a una acción del usuario o informando a los usuarios sobre un proceso que la aplicación ha realizado o realizará. Desaparecen automáticamente o pueden ser descartados por el usuario.

Vista Previa

Figma
Imagen de la notificación

Usos

Cuándo usar

Para proporcionar una notificación temporal al usuario después de que se ha realizado una acción, como enviar un correo electrónico o guardar un archivo. Para mostrar un mensaje de advertencia o de error al usuario, como cuando faltan campos obligatorios en un formulario o cuando se produce un error al intentar realizar una acción.

Cuándo no usar

No deberías utilizar el componente toast si no es necesario proporcionar una notificación temporal al usuario o si hay una forma más adecuada de proporcionar la información. Debes evitar utilizar los toasts de manera excesiva o molesta, ya que esto puede ser frustrante para el usuario y puede interrumpir la tarea que está realizando.

Comportamiento

Tipo

Visualización de notificación con título
Basic
Visualización de notificación título y descripción
Description
Visualización de notificación con título, descripción y enlace
Description + Link

Estados

Visualización de notificación por defecto
Default
Visualización de notificación informativa
Info
Visualización de notificación de advertencia
Warning
Visualización de notificación de error
Error
Visualización de notificación de error
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.

El elemento Toast se trata del componente alert usado como un mensaje emergente. 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. El aspa de cierre tiene role="button" además de la propiedad aria-label.