Enlaces

Contenido

Definición

Los enlaces son elementos interactivos más sencillos. Permiten al usuario:

  • Navegar a otras páginas del sitio, y a otro sitio diferente.
  • Navegar a una parte de la página actual.
  • Descargar un fichero (un documento, una imagen...).
  • Desencadenar una acción (p.ej. enviar un email, llamar por teléfono...).

Anatomía

Las partes del componente son:

  1. Icono (opcional): Elemento gráfico que acompaña al enlace como refuerzo visual
  2. Texto: Etiqueta textual que describe el destino del enlace.

Tipos

Se dispone de varios tipos que atienden a diversas necesidades.

Sin icono

Con icono

Pautas de uso

Ajusta el enlace al contexto en el que se muestra

El diseño del enlace estará determinado por el contexto en el que muestra

El texto del enlace debe aclarar su destino

  • Evita expresiones genéricas como "haz clic aquí".
  • Evita introducir la propia URL como texto del enlace.
  • Escribe textos claros y breves (idealmente 5 palabras o menos).

Utiliza iconos significativos

  • Utiliza los iconos solo en enlaces independientes, a la izquierda del texto del enlace.
  • Utiliza iconos que ayuden a aclarar el destino del enlace.

Usa botones para realizar transacciones

  • Utiliza enlaces para navegar, para descargar ficheros y para hacer interactivos teléfonos y direcciones de correo electrónico.
  • Utiliza botones para realizar transacciones (enviar un formulario, realizar una búsqueda...). También puedes utilizar botones para navegar a una página o pantalla cuyo único objetivo sea iniciar una transacción. Por ejemplo, puedes incluir un botón "COMPRAR" que te lleve a la página en la que efectivamente se realiza la compra.

Asegúrate de que los enlaces son perceptibles e identificables

  • Los enlaces dentro del texto toman el estilo del bloque dentro del que se presentan. Este tipo de enlaces son más difíciles de percibir en una lectura poco atenta, por lo que deben usarse solo para interacciones accesorias.
  • Utiliza de forma preferente el color principal
  • Para enlaces independientes, puedes utilizar el color principal de la escala de grises para introducir variedad visual. En los bloques de color oscuro, como el menú auxiliar y el pie de página, introduce los enlaces en color blanco.

Componentes relacionados

Similar a:

Formado por:

Recursos asociados al componente

Implementación:

Storybook (solo accesible desde la RCJA)

Control de versiones

FechaVersiónNotas
20/03/20261.3Se actualiza definición y pautas de uso