Todos los componentes (204)
Enlace de texto
Navegación · Link · .amset-link
Qué es y cuándo usarlo
Enlace de texto. Con href es un <a> de verdad: se abre en otra pestaña con el clic central, se copia la dirección y el lector de pantalla dice «enlace».
Cuándo usarlo
- Para ir a otro sitio. La regla de siempre: si cambia de sitio, enlace; si cambia de estado, botón.
tone="ink"para un enlace dentro de una tabla o una lista, donde una columna de azul sería ruido;tone="error"para lo que borra o da de baja.
Cuándo no
- Para algo que navega pero tiene que verse como un botón,
ButtonLink. - Para algo que se pulsa y NO navega,
Button. Un<a>cononClickque no lleva a ninguna parte es un botón mal puesto.
Teclado: Tab llega a él, Intro lo sigue. Con Ctrl/⌘ abre en otra pestaña, como cualquier enlace — eso se pierde si se usa un botón.
Accesibilidad: viene subrayado, en el color de acento y en negrita: dentro de un texto corrido el color no puede ser lo único que distinga un enlace (WCAG 1.4.1), y el acento contra el texto de alrededor no llega al 3:1 que haría falta. underline="hover" lo subraya solo al posar el ratón y underline="none" lo quita, para un enlace que no va dentro de un párrafo (un menú, una barra). bare le quita también el peso y solo vale fuera de un párrafo. Si abre en otra pestaña, conviene decirlo con un VisuallyHidden. Sin href sigue siendo un enlace para el lector (role="link"), enfocable y con Intro.
Enrutado de cliente: con RouterProvider alrededor de la aplicación, el href pasa por la función navigate que le des (la del enrutador del proyecto) en vez de recargar la página entera. Los clics con Ctrl, ⌘, Mayúsculas o Alt, el botón central, un target propio, download y los destinos fuera de la aplicación (otro dominio, mailto:, tel:, un ancla) los sigue llevando el navegador.
Aspecto fino: --amset-link-color y --amset-link-offset.
Cómo se ve
Lee las condiciones de uso antes de seguir.
<Text>Lee las <Link>condiciones de uso</Link> antes de seguir.</Text>Props
Se importa con import { Link } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
childrenobligatoria | ReactNode | — |
bare | boolean | Quita tambien el peso. Solo cuando el enlace NO esta dentro de un texto corrido: una tarjeta entera, una entrada de menu. Dentro de un parrafo, el color no puede ser lo unico que diga que algo es un enlace (WCAG 1.4.1), y hay quien no distingue ese azul del negro de al lado. |
className | string | — |
disabled | boolean | Apagado: pierde el destino y sale del orden de tabulacion. Se anuncia con `aria-disabled`, porque un `<a>` no se puede deshabilitar como un boton. |
onPress | () => void | Se llama al pulsar, con raton o con el teclado. Convive con `onClick`. |
style | CSSProperties | — |
tone | "accent" | "secondary" | "tertiary" | "error" | "ink" | `accent` es el enlace de siempre. `ink` para un enlace dentro de una tabla o una lista, donde una columna de azul seria ruido: sigue en negrita, que es lo que lo distingue. |
underline | LinkUnderline | El subrayado. Por defecto `always`: dentro de un parrafo el color no basta (WCAG 1.4.1). El acento medido contra el texto de alrededor da 1,12:1 y hace falta 3:1, asi que sin subrayado axe lo marca y quien no distingue ese color no ve el enlace. `hover` lo pone al posar el raton y `none` lo quita, para un enlace que no va en mitad de un texto (un menu, una barra). |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
Mandos
Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.
| Variable | Por defecto |
|---|---|
--amset-link-color | var(--amset-accent-text) |
--amset-link-offset | 0.15em |
Cómo se cambia
.amset-link {
--amset-link-color: ...;
--amset-link-offset: ...;
}En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: