# Link Un enlace lleva a otro lugar: otra página, otra parte de la misma página, otro sitio. ## Playground ```html el informe de noviembre ``` ## 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 ```html os agendamentos desta semana ``` ### 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 ```html o guia de horários ``` ## 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 Vea el [informe de respaldo de noviembre](#padroes). El texto del enlace indica a dónde va, incluso si se lee fuera de contexto. Don’t Para ver el informe, [haga clic aquí](#padroes). "Haga clic aquí" no dice nada a alguien que esté pasando por la lista de enlaces del lector de pantalla. Do [Vea el portafolio de Feitio](#padroes) Otro sitio, en la misma pestaña: sin icono. Don’t [See the Feitio showcase](#padroes) 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 con `rel="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.