Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Notificación
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.
Usos
Como 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.
Como 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
Basic
Description
Description + Link
Estados
Default
Info
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.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
