Link
El componente Link nos permite navegar entre páginas internas o externas de un sitio.
import React from "react";
import { Link } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Link as="a" href="mailto: hola@tiendanube.com">
Link
</Link>
);
export default Example;Se compone de un texto, además de iconos opcionales.
Utilizamos este componente de forma independiente, dentro de otros componentes o en medio de un bloque de texto. Actualmente el Link posee 3 variantes con usos distintos, además de la posibilidad de incluir un icono.
Esta variante se usa para destacar links importantes a la navegación de la persona usuaria, ya que es de color azul y el uso del underline es opcional. Se puede usar este tipo de link de forma repetida en una misma página, siempre y cuando no se repita en un mismo elemento.
Esta variante se utiliza para acciones neutrales y complementarias. Puede acompañar a la variante Primary o Danger en los casos donde tenemos acciones opuestas. Por exemplo: Si el Primary Link es "Guardar", el Default Link será "Cancelar".
Esta variante es utilizada para destacar links con acciones destructivas, donde el uso del componente Button Danger tiene un protagonismo visual más alto del necesario.
Usamos iconos para reforzar el mensaje del link o informar que su destino es externo. Pueden ser aplicados antes o después del texto.
El texto del Link debería describir claramente la acción haciendo referencia a la misma usando un lenguaje coloquial y directamente dirigido a la persona usuaria. Por ejemplo, usamos "editar categorías" y no "categorías".
Los links externos deben estar siempre acompañados por un icono que ayude a ilustrar lo que sucederá al clickearlo, con el objetivo de reforzar el mensaje y destacarlo visualmente.
Por ejemplo, cuando el link ejecuta una acción de navegación externa, debemos usar un icono para indicar que el usuario será direccionado hacia otro aplicativo o una página externa.
La excepción de esta regla es cuando el link está dentro del contexto de un párrafo o frase, donde podemos evitar usar iconos para mantener la estructura visual del bloque de texto.
- Navegar hacia otra sección de la aplicación o sitio
- Navegar hacia otra aplicación o página externa
- Ejecutar acciones de menor relevancia
- Button - Puede ser usado para iniciar acciones, ejecutar cambios de estado o de página que requieren mayor destaque visual.
Este componente puede ser renderizado como elemento HTML <button> o <link>, mediante la propiedad as, permitiendo hereder todas las propiedades nativas de los elementos HTML para diferentes implementaciones.
Para proporcionar una mayor previsibilidad, siempre que un enlace lleve a una URL externa debemos señalarlo con un icono externo.
Al usar enlaces externos no debemos olvidar usar un ícono para señalar.
El contenido de los enlaces debe mostrarse en una sola línea.
Los enlaces deben estar siempre en una sola línea, evitando interrupciones en su lectura.
Los iconos utilizados deben tener una relación directa y clara con el CTA del enlace.
No debemos usar íconos donde la relación con el CTA no sea obvia.
el color del enlace debe estar en línea con el contenido del mensaje de CTA.
El color del enlace debe ayudar a la comprensión de su contenido.
Instalá el componente via terminal.
npm install @nimbus-ds/linkAdditional props are passed to the <Link> element. See a docs for a list of props accepted by the <Link> element.