Link
Un enlace lleva a otro lugar: otra página, otra parte de la misma página, otro sitio.
En esta página
Playground
<a class="feitio-link" href="#playground">el informe de noviembre</a>Cuándo usarlo
- Para navegar, siempre, incluso cuando parece una acción ("Ver todo").
- Dentro del texto o en su propia línea.
Cuándo no usarlo
- Para hacer algo suceder (guardar, borrar, enviar): use Button.
- Para una puerta prominente a otra área: use LinkCard.
Ejemplos
Misma pestaña
La predeterminada: el enlace te lleva allí, y el botón de atrás te devuelve.
Mostrar código
<a class="feitio-link" href="/agendamentos">os agendamentos desta semana</a>Nueva pestaña
La excepción, solo cuando salir de la página haría que la persona perdiera algo, como un formulario parcialmente completado. Siempre con el icono y el aviso oculto.
Mostrar código
<a class="feitio-link" href="/ajuda/horarios" target="_blank" rel="noopener">
o guia de horários<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-new-tab"/></svg>
<span class="feitio-visually-hidden"> (abre em nova aba)</span>
</a>El icono significa nueva pestaña
En Feitio, un icono en un enlace significa una sola cosa: abre otra pestaña. Un enlace a otro sitio que se abre en la misma pestaña no tiene icono.
Estados
- Siempre subrayado. El color no es suficiente.
- Hover: el subrayado se engrosa.
- Punto de atención: el contorno naranja.
Hacer y no hacer
Do
El texto del enlace indica a dónde va, incluso si se lee fuera de contexto.
Don’t
"Haga clic aquí" no dice nada a alguien que esté pasando por la lista de enlaces del lector de pantalla.
Don’t
El icono promete una nueva pestaña que nunca se abre: la gente aprende no a confiar en él.
Escritura
- El texto del enlace es el destino: "informe de respaldo", no "aquí", "saber más" o la dirección cruda.
- El icono está justo al final del texto, dentro del enlace.
Accesibilidad
- Nueva pestaña siempre con el texto oculto "(se abre en una nueva pestaña); el icono es
aria-hidden. target="_blank"siempre conrel="noopener". En React, pedir una nueva pestaña agrega las tres juntas.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-link" | obligatorio | Texto naranja, siempre subrayado. |
href | URL | El destino. |
target="_blank" | solo como excepción | Abrir una nueva pestaña; siempre con el icono, el texto oculto y el rel. |
rel="noopener" | con target="_blank" | La seguridad de la nueva pestaña. |