Logo Gobierno de España Logo DINTEL · Sistema de diseño 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 Enlace

Enlace

Elemento de navegación. Pueden aparecer solos, dentro de una oración o párrafo, o directamente después del contenido.

Vista previa

Vista previa del componente enlace

Usos

Cuándo usar

Cuando navegamos a una página diferente.

Cuándo no usar

Cuando demasiados enlaces saturarán una página y dificultarán que los usuarios identifiquen sus próximos pasos. Cuando el clic desencadena una acción y no una navegación a una página diferente se debe usar el componente button.

Comportamiento

Tamaños

Visualización del componente enlace con tamaño M

M

Visualización del componente enlace con tamaño L

L

Tipos de selección

Visualización del componente enlace

Texto

Visualización del componente enlace con icono y texto

Icono + Texto

Visualización del componente link con texto e icono

Texto + Icono

Estados

Visualización del componente enlace en estado por defecto

Default

Visualización del componente enlace en estado hover

Hover

Visualización del componente enlace en estado enfocado

Focus

Visualización del componente enlace en estado presionado

Pressed

Visualización del componente enlace en estado deshabilitado

Disabled

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 que contiene el texto del link tiene role="link". E link tiene la propiedad title-text editable, que permite agregar un texto legible para el lector de pantalla, que especifica donde llevará este enlace y si abre o no una ventana nueva..

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

 Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web