Link
Permite navegar a otra página o sección, o ejecutar una acción secundaria, con menor peso visual que un botón.
- Navegar dentro del panel: ir a otra página o sección relacionada, sin ejecutar ninguna acción sobre el elemento actual. Ej.: "Ver detalle", "Gestionar suscripción".
- Navegar a un sitio o aplicación externa: llevar fuera del panel, siempre acompañado de un ícono que anticipe la salida. Ej.: "Ver centro de ayuda", "Leer la documentación".
- Ejecutar una acción secundaria con menor peso visual: mediante as="button", para acciones que no necesitan la jerarquía de un botón. Ej.: "Agregar", "Copiar dominio".
- Enlazar dentro de un bloque de texto: insertar un enlace embebido en un párrafo, una alerta o el mensaje de un error, manteniendo la estructura del texto que lo rodea. Ej.: "Reintentar" dentro del aviso de un pedido con error.
- Ejecutar la acción principal de una pantalla o un formulario: que necesita mayor peso visual y jerarquía. En su lugar, usar Button. Ej.: "Crear producto", "Guardar cambios".
- Representar una acción solo con un ícono, sin texto visible: en su lugar, usar Icon button con su aria-label. Ej.: eliminar, editar o cerrar en una fila.
- Text: contenido del enlace; describe la acción o el destino de la navegación.
- Icon: opcional, ubicado antes o después del texto, que refuerza la acción o señala que el destino es externo.
Primary: destaca enlaces relevantes para la navegación. Ej.: "Gestionar suscripción", "Ver detalle".
Neutral: para enlaces de menor jerarquía o acciones dentro de contenedores cuya superficie lo requiera por contraste. Suele utilizarse en combinación con la variante subrayado. Ej.: "Conocer costos" dentro de un Alert.
Danger: señala una acción destructiva, cuando un Button danger tendría más peso visual del necesario. Ej.: "Eliminar datos del cliente".
Neutral background: exclusivamente para superficies oscuras o de color, donde el enlace necesita contrastar con un fondo no claro. Ej.: "Volver" dentro de un Product Update.
Underline: subraya el texto; refuerza la condición de enlace cuando convive con texto plano. Ej.: un enlace embebido en un párrafo.
None: sin subrayado; usar cuando el color y el contexto ya identifican el enlace. Ej.: un enlace de navegación en una fila de tabla con nombre de producto.
Caption: tamaño reducido, para enlaces de apoyo o texto secundario. Ej.: un enlace dentro del texto de ayuda de un campo.
Base: tamaño por defecto, alineado al cuerpo de texto estándar. Ej.: un enlace en una fila de tabla.
Highlight: tamaño aumentado, para enlaces que necesitan mayor presencia. Ej.: el CTA de un estado vacío.
a: valor por defecto; renderiza un elemento <a> para navegar a una URL.
button: renderiza un elemento <button> para ejecutar una acción sin navegar.
El enlace aparece embebido en párrafos de ayuda o de error, como valor accionable en filas de tablas y listas, y dentro de alertas que ofrecen una acción de seguimiento.
Pedido #1042
Juan Pérez
Acompañar todo enlace a una URL externa con un ícono que anticipe que abrirá otro sitio o aplicación.
Evitar omitir el ícono en enlaces externos o colocarlo adelante del texto.
Usar íconos con relación directa y evidente con la acción del enlace.
Evitar íconos cuya relación con la acción del enlace no sea evidente.
- Foco visible: al navegar con teclado, el enlace muestra un anillo de foco (:focus-visible) que indica el elemento activo.
- Elemento correcto según la intención: usar as="a" para navegar (renderiza <a>) y as="button" para ejecutar una acción (renderiza <button>), de modo que el teclado y el lector de pantalla anuncien el rol esperado.
- Estado deshabilitado: el atributo disabled solo tiene efecto con as="button"; para una navegación que no está disponible, no renderizar el enlace en lugar de mostrarlo inactivo.
- Información no dependiente del color: señalar los enlaces externos con un ícono que refuerza el mensaje, además del color, de modo que la condición de enlace no dependa únicamente del color.
- Texto descriptivo: el texto del enlace describe la acción o el destino por sí solo. Ej.: "Editar categorías" en lugar de "Categorías".
Instalá el componente via terminal.
npm install @nimbus-ds/linkimport React from "react";
import { Link } from "@nimbus-ds/components";
const Example: React.FC = () => <Link as="a">Ver detalle</Link>;
export default Example;Las propiedades adicionales se pasan al elemento <Link>. Consultá la documentación del elemento a para ver la lista de atributos aceptados.
- Button — Para iniciar acciones o avanzar en un proceso con mayor peso visual.
- Icon button — Para una acción representada solo por un ícono, sin texto visible.
- Text — Para el bloque de texto que puede contener un enlace embebido.
Link
| Name | Type | Default | Description |
|---|---|---|---|
as | 'a' | 'a' | The underlying element to render — either a HTML element name or a React component. |
children* | React.ReactNode | The content of the link. | |
appearance | 'danger' | 'neutral' | Change the visual style of the link. |
textDecoration | 'line-through' | 'neutral' | The textDecoration property specifies the decoration added to link. |
fontSize | 'base' | 'base' | The fontSize property sets the size of the link. |
lineHeight | 'base' | 'base' | The lineHeight property specifies the line height of the link |
Link.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.