Notificación

Componentes

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

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

Info

Visualización de notificación de advertencia

Warning

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.