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
Etiqueta
Etiqueta
Las tags son elementos que usamos para listar atributos o para mostrar filtros activos.
Usos
Como usar
Utilizar etiquetas cuando el contenido está asignado a varias categorías y el usuario necesite una forma de diferenciarlas.
Como no usar
No usar varios tipos de énfasis dentro de una interfaz de usuario. Se utiliza un énfasis más fuerte para denotar estados seleccionados en muchos escenarios y puede confundir al usuario.
No usar demasiados colores para las etiquetas dentro de una interfaz de usuario. Por lo general, solo se debe usar un color para las etiquetas. Los colores múltiples solo deben usarse cuando sean significativos para el usuario.
Comportamiento
Acción
Text
Icon
Tag Filter
Tag Button
Tipo
Default
Success
Warning
Error
Info
Icon Right
Tamaño
Small
Medium
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.
Si la etiqueta no tiene asociada acción es un elemento span normal con texto en su interior que no tiene ninguna funcionalidad añadida para las tecnologías de asistencia.
Si la etiqueta tiene un papel de filtro y lleva el aspa de cierre, es un elemento span con el icono de cerrar con role="button"
Si la etiqueta tiene un papel de botón, lleva la propiedad role="button"
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
