'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Acciones
Button
Inicia una acción. Ocho variantes, seis tonos, cinco tamaños y tres formas; íconos, un atajo de teclado, carga con o sin texto, un estado de éxito, enlaces que se ven como botones y tamaños que cambian por breakpoint.
import { Button } from '@alea/ui';
Ejemplos
Variantes
Ocho estilos para ocho niveles de énfasis: primary para la acción principal, secondary (el chip), soft (con tinte), ghost (con contorno), text (sin borde hasta el hover), dashed (agregar algo), danger y link.
Tamaños
xs 28 px, sm 32 px, md 40 px (por defecto), lg 48 px y xl 56 px. El padding, el texto y el ícono crecen con la altura.
Con íconos
Íconos antes o después de la etiqueta. Están ocultos para lectores de pantalla; la etiqueta nombra al botón.
Cargando y deshabilitado
isLoading mantiene el ancho y el nombre, muestra un spinner e ignora los clics hasta terminar.
Ancho completo
Para formularios en pantallas pequeñas y diseños apilados.
Tonos
tone colorea botones soft, ghost, text, dashed y link; en primary crea un botón sólido de ese color.
Formas
pill (por defecto), rounded (8 px) o square (esquinas de 4 px). Usa la misma forma que el resto de tu interfaz.
Texto y posición de carga
loadingLabel deja texto junto al spinner ("Guardando…"); loadingPosition pone el spinner donde estaba el ícono de inicio o de fin.
Atajo y enlace
shortcut muestra la tecla junto a la etiqueta y define aria-keyshortcuts; href convierte el botón en un enlace con el mismo aspecto.
Responsive
size y fullWidth aceptan un valor por breakpoint: aquí los botones son grandes y de ancho completo en teléfonos, y medianos y en línea desde md (768 px). Cambia el tamaño de la ventana para verlo.
Botones anchos
justify define dónde va el contenido en un botón de ancho completo: between pone la etiqueta a la izquierda y el ícono final a la derecha, ideal para menús y listas de acciones.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Shape
shape - Size
size - Tone
tone - Variant
variant - Íconos
- Soft por tono
- Cargando
- Atajo
- Ancho completo y justify
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
| size | Alto | Ancho | Padding (y · x) | Radio | Tamaño de texto | Icono | Separación |
|---|---|---|---|---|---|---|---|
xs | - | - | - | - | - | - | - |
sm | - | - | - | - | - | - | - |
md | - | - | - | - | - | - | - |
lg | - | - | - | - | - | - | - |
xl | - | - | - | - | - | - | - |
Cada tamaño y espacio es múltiplo de 4 px.
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-on…--alea-accent-solid…--alea-accent-strong…--alea-border-control…--alea-border-strong…--alea-button-bottom…--alea-button-ring…--alea-button-text…--alea-button-top…--alea-chip-bg…--alea-chip-text…--alea-focus…--alea-status-danger…--alea-status-danger-on-solid…--alea-status-danger-solid…--alea-status-danger-solid-hover…--alea-status-info…--alea-status-on…--alea-status-success…--alea-status-warning…--alea-surface-hover…--alea-text…
Space
--alea-space-5…--alea-space-6…
Size
--alea-size-control-lg…--alea-size-control-md…--alea-size-control-sm…
Radius
--alea-radius-full…--alea-radius-md…--alea-radius-sm…--alea-radius-xs…
Type
--alea-font-family-body…--alea-font-family-mono…--alea-font-size-base…--alea-font-size-lg…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-tracking-tight…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-duration-fast…--alea-motion-ease-out…
Component
--alea-button-font…--alea-button-gap…--alea-button-h…--alea-button-icon…--alea-button-pad…--alea-button-pad-x…--alea-button-radius…--alea-icon-button-icon…
Props
Button props
El botón de acción: ocho estilos, seis tonos, cinco tamaños, tres formas, íconos, un atajo, estados de carga y éxito, y enlaces con aspecto de botón.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
fullWidth | Responsive<boolean> | - | Se estira al ancho de su contenedor. Puede cambiar por breakpoint: { base: true, md: false } es de ancho completo solo en teléfonos. |
href | string | - | Convierte el botón en un enlace con aspecto de botón. |
iconEnd | ReactNode | - | Ícono después de la etiqueta. |
iconStart | ReactNode | - | Ícono antes de la etiqueta. |
isLoading | boolean | - | Muestra un spinner, mantiene el ancho y avisa a los lectores de pantalla que está ocupado. |
isSuccess | boolean | - | Muestra un check que se dibuja solo y successLabel (el patrón success); actívalo por un momento después de que la acción funcionó. |
justify | "start" | "center" | "between" | - | Cómo se ubica el contenido en un botón ancho: center (por defecto), start, o between (etiqueta a la izquierda, ícono final a la derecha). |
loadingLabel | ReactNode | - | Texto a mostrar junto al spinner mientras carga. Sin él, el spinner cubre la etiqueta. |
loadingPosition | "start" | "end" | "center" | 'center' | Dónde va el spinner mientras carga: center (cubre la etiqueta, por defecto), start o end (toma el lugar del ícono). |
rel | string | - | Con href: la relación del enlace. |
ripple | boolean | - | Una onda crece desde el puntero al presionar (el patrón ripple). |
shape | "pill" | "rounded" | "square" | - | pill (por defecto), rounded (8 px) o square (esquinas de 4 px). |
shortcut | ReactNode | - | Un atajo de teclado mostrado al final, como ⌘S (también se define como aria-keyshortcuts cuando es texto). |
size | Responsive<"xs" | "sm" | "md" | "lg" | "xl"> | - | xs 28 px, sm 32 px, md 40 px (por defecto), lg 48 px, xl 56 px. Puede cambiar por breakpoint: { base: 'lg', md: 'md' }. |
successLabel | ReactNode | - | La etiqueta mientras isSuccess. Por defecto "Listo". |
target | string | - | Con href: dónde abrirlo. |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | "info" | - | El color de los botones soft, ghost, text, dashed y link, y de un primary sólido: neutral (por defecto), accent, success, warning, danger o info. |
variant | "ghost" | "primary" | "secondary" | "soft" | "text" | "dashed" | "danger" | "link" | 'primary' | primary: el botón con degradado oscuro (sólido en su tono cuando hay tone); secondary: el chip (blanco sobre oscuro, negro sobre claro); soft: con tinte; ghost: con contorno; text: sin borde hasta el hover; dashed: contorno discontinuo; danger: destructivo; link: solo 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 × size
Oscuro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
variant="primary" | |||
variant="secondary" | |||
variant="ghost" | |||
variant="danger" | |||
variant="link" |
Claro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
variant="primary" | |||
variant="secondary" | |||
variant="ghost" | |||
variant="danger" | |||
variant="link" |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
States
Oscuro
isDisabled="false" | isDisabled="true" | |
|---|---|---|
isLoading="false" | ||
isLoading="true" |
Claro
isDisabled="false" | isDisabled="true" | |
|---|---|---|
isLoading="false" | ||
isLoading="true" |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
- Variantes
justifystartcenterbetweenloadingPositionstartendcentershapepillroundedsquaretonedangerneutralaccentsuccesswarninginfovariantghostprimarysecondarysofttextdasheddangerlink- Estados
- PressedDisabledHoverKeyboard focus
- Motion
- presssuccessmore
- 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-button-icon.alea-button-inline-spinner.alea-button-spinner.alea-button-content.alea-success-in.alea-success-check.alea-button-label.alea-button-kbd.alea-button- Atributos data
data-size=xsdata-size=smdata-size=mddata-size=lgdata-size=xldata-shape=roundeddata-shape=squaredata-full-widthdata-justify=startdata-justify=betweendata-hiddendata-tone=accentdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-variant=primarydata-variant=dangerdata-variant=secondarydata-variant=softdata-variant=ghostdata-tonedata-tone=neutraldata-variant=text
Accesibilidad
- Un elemento button real, que se presiona con mouse, toque, Enter y Espacio, con anillo de foco solo para el foco por teclado.
- Mientras carga, el botón conserva su nombre accesible, se anuncia como ocupado y no responde a las pulsaciones. Con loadingLabel, se lee el texto nuevo.
- Con href se renderiza un enlace real (un elemento a), así que se abre en otra pestaña con ⌘ o Ctrl clic y se anuncia como enlace.
- shortcut define aria-keyshortcuts; la tecla visible se oculta a los lectores de pantalla para que no se lea dos veces.
- Cada tamaño mide al menos 28 px de alto; en pantallas táctiles prefiere md o más grande (40 px en adelante) para llegar a un área de 44 px con el espaciado.
- Los botones deshabilitados no reciben foco; cuando la razón importa, déjalo habilitado y explica al presionarlo.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Lleva el foco al botón |
| Enter o Espacio | Lo presiona |
| Enter (con href) | Sigue el enlace |
Qué hacer y qué evitar
Hacer
- Un botón primario por vista: la acción que quieres que la gente tome.
- Escribe la acción como un verbo: Guardar cambios, no OK.
- Usa danger (o tone="danger") solo para acciones que pierden datos, y pide confirmación.
- Usa soft o ghost para acciones secundarias junto a un primario, y text para las menos importantes.
- Haz los botones de ancho completo en teléfonos con fullWidth={{ base: true, md: false }}.
Evitar
- No uses un botón para ir a otra página: usa Link, o dale href al botón.
- No pongas dos botones primarios uno al lado del otro.
- No dependas solo del color para distinguir el peligro; el texto lo dice.
- No mezcles formas en una pantalla: elige pill, rounded o square para el producto.
En Figma
Set de componentes Button: Variant (Primary, Secondary, Soft, Ghost, Text, Dashed, Danger, Link) × Tone × Size (XS, S, M, L, XL) × Shape (Pill, Rounded, Square) × State (Default, Hover, Pressed, Focus, Disabled, Loading), con propiedades booleanas para los íconos y el atajo.