Tipografía

Link

Lleva a algún lugar. En el texto, independiente o atenuado, con los enlaces externos marcados.

import { Link } from '@alea/ui';

Ejemplos

Variantes

Los enlaces en línea van subrayados; los enlaces independientes y apagados sirven para navegación y pies de página.

Read the theming guide to change the accent.

Installation

Made in Caracas · Accessibility

ARIA patterns

size define sm, md o lg (por defecto un enlace toma el tamaño del texto que lo rodea); tone="neutral" para listas densas, tone="danger" para enlaces que quitan algo; iconStart e iconEnd agregan íconos, y en enlaces standalone la flecha final avanza con hover y foco.

Small link Medium link Large link

Read the guide See pricing

Account settings Remove member

Configuraciones

Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.

neutral

accent

danger

inline

muted

standalone

Sizesize
Tonetone
Variantvariant

Estados

Cada estado de interacción, forzado para compararlos, en ambos temas.

Oscuro

Habilitado

Hover

Foco

Presionado

Disabled

Claro

Habilitado

Hover

Foco

Presionado

Disabled

Anatomía

Las partes del componente y la clase que da estilo a cada una.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-accent-strong…
--alea-border-control…
--alea-status-danger…
--alea-text…

Type

--alea-font-size-base…
--alea-font-size-md…
--alea-font-size-sm…
--alea-font-weight-medium…

Motion

--alea-motion-duration-base…
--alea-motion-duration-fast…
--alea-motion-ease-emphasized…
--alea-motion-ease-out…

Props

`Link` props

Ver 10 props heredadas

Un enlace, accesible y con foco visible: tres estilos, tres tamaños, tres tonos, íconos, y enlaces externos que dicen que abren una pestaña nueva.

Prop	Tipo	Por defecto	Descripción
`external`	`boolean`	-	Se abre en una pestaña nueva con rel=noopener y una flecha.
`iconEnd`	`ReactNode`	-	Un ícono después del texto (en enlaces standalone avanza hacia donde va el enlace).
`iconStart`	`ReactNode`	-	Un ícono antes del texto.
`size`	`"sm" \| "md" \| "lg"`	-	sm (13 px), md (14 px) o lg (16 px). Por defecto: el tamaño del texto que lo rodea.
`tone`	`"danger" \| "neutral" \| "accent"`	-	accent (por defecto), neutral (color del texto, para listas densas) o danger (enlaces destructivos como "Quitar").
`variant`	`"inline" \| "muted" \| "standalone"`	`'inline'`	inline: texto de acento subrayado; standalone: sin subrayado hasta el hover; muted: color del texto.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variant

Oscuro

Link dark
	`variant="inline"`	`variant="standalone"`	`variant="muted"`
Learn more	Learn more	Learn more

Claro

Link light
	`variant="inline"`	`variant="standalone"`	`variant="muted"`
Learn more	Learn more	Learn more

Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.

Variantes: sizesmmdlg
tonedangerneutralaccent
variantinlinemutedstandalone
Estados: HoverDisabledKeyboard focus
Motion: hint
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-link.alea-link-icon.alea-link-icon-end.alea-link-ext
Atributos data: data-variant=inlinedata-variant=standalonedata-variant=muteddata-size=smdata-size=mddata-size=lgdata-tone=neutraldata-tone=danger

Los enlaces externos agregan "(se abre en una pestaña nueva)" para lectores de pantalla y rel=noopener.
Los enlaces en el texto van subrayados, así que no dependen del color.

Teclado

Tecla	Acción
`Enter`	Sigue el enlace

Qué hacer y qué evitar

Hacer

Di a dónde lleva: Lee la guía de precios.

Evitar

No escribas "haz clic aquí".
No uses un enlace para acciones que cambian algo: usa Button.