Todos los componentes (204)
Enlace con forma de botón
Acciones · ButtonLink
Qué es y cuándo usarlo
Lo que navega es un enlace, aunque se pinte como un botón. ButtonLink tiene el aspecto de Button (las mismas variantes, tonos y tamaños) y 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
- La llamada que lleva a otra pantalla: «Ver el pedido», «Ir a pagar», «Seguir comprando».
- Al pie de una tarjeta, de un aviso o de un estado vacío, cuando la salida es otra página.
Cuándo no
- Si hace algo en la misma pantalla (guardar, borrar, abrir un diálogo), es un
Button. Un<button>que navega por código no se abre en otra pestaña ni se anuncia como enlace. - Un enlace dentro de un párrafo se queda como enlace de texto:
Link. - Varios destinos recogidos en un menú:
ActionMenuconhrefen cada acción.
Teclado: Tab llega a él; Intro lo sigue. Espacio no, como en cualquier enlace. Con disabled deja de llevar a ningún sitio: se sigue anunciando como enlace, con aria-disabled, y sale del orden del Tab. Con RouterProvider, el href pasa por el enrutador de la aplicación, igual que en Link.
Accesibilidad: el nombre es el texto; los iconos son decorativos. Si se abre en otra pestaña (target="_blank"), dilo en el nombre con un aria-label que empiece por el texto que se ve.
Aspecto fino: las variables --amset-button-* de Button; la clase propia es amset-button--link.
Cómo se ve
<ButtonLink href="/componentes/" variant="solid">Ver todos los componentes</ButtonLink>
<ButtonLink href="/empezar/" variant="outline">Como empezar</ButtonLink>
<ButtonLink href="https://ui.amset.tech" variant="ghost">Abrir el banco de pruebas</ButtonLink>Props
Se importa con import { ButtonLink } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
childrenobligatoria | ReactNode | — |
className | string | — |
disabled | boolean | Apagado: deja de navegar y de entrar en la tabulacion, y se anuncia asi. |
endIcon | ReactNode | Icono después del texto (una flecha, un chevron de menú). |
fullWidth | boolean | Ocupa todo el ancho disponible. En móvil suele ser lo que se quiere. |
href | string | A donde lleva. Sin el no es un enlace: es un boton. |
onPress | () => void | Se llama al pulsar, con raton o con el teclado, ademas de navegar. Sin argumento, igual que en el enlace de texto: lo que haga falta parar se para con `onClick`, que ahi SI trae el evento de verdad. |
shape | "default" | "pill" | La forma: `default` (por defecto) o `pill`, con las esquinas del todo redondeadas. Dentro de un `ButtonGroup` solo quedan redondeadas las esquinas de fuera del grupo. Para el boton redondo de solo icono, `IconButton`. |
size | "sm" | "md" | "lg" | — |
startIcon | ReactNode | Icono antes del texto. Decorativo: el texto es el que manda. |
style | CSSProperties | Estilo en linea. El aspecto estable va en las variables CSS `--amset-button-*`, que es lo que se mantiene; esto es para lo que solo se sabe en tiempo de ejecucion: un color que elige quien usa la aplicacion, una posicion calculada, un alto que depende del contenido. Estuvo prohibido y hubo que abrirlo: un front real lo usaba en 40 botones para calcular su halo a partir de un color arbitrario (AMS-735), y sin esto la unica salida era escribir CSS a mano contra nuestras clases. |
tone | "neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | Que quiere decir. Sin el, un boton solido o suave es de `accent` (la accion principal) y uno de contorno o fantasma es `neutral`. `error` es el de borrar o dar de baja. |
variant | "solid" | "soft" | "outline" | "ghost" | Como se pinta: `solid`, `soft`, `outline` (por defecto) o `ghost`. |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: