'/%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
ButtonGroup, SplitButton y CompoundButton
Botones relacionados unidos en un solo control, y una acción principal con un menú de acciones relacionadas. CompoundButton es un botón alto con un título y una segunda línea, para pantallas de inicio y estados vacíos.
import { ButtonGroup, SplitButton, CompoundButton } from '@alea/ui';
Ejemplos
Botones unidos y un botón dividido
El grupo une las formas; el botón dividido agrega un menú.
CompoundButton
Un botón alto con un título y una segunda línea, para opciones en pantallas de inicio y estados vacíos.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Attached
attached - Orientation
orientation
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.
Space
--alea-space-2…
Radius
--alea-radius-md…
Props
ButtonGroup props
Botones relacionados lado a lado, unidos en un solo control.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Qué hacen los botones juntos, para lectores de pantalla ("Alineación del texto"). |
attached | boolean | true | Une los botones en una sola forma. Por defecto true; false solo los separa. |
className | string | - | Clases extra para el elemento raíz. |
orientation | "horizontal" | "vertical" | 'horizontal' | horizontal (por defecto) o vertical. |
SplitButton props
Una acción principal más un menú de acciones relacionadas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
actionsobligatoria | { id: Key; label: string; icon?: ReactNode; description?: string | undefined; }[] | - | Las otras acciones del menú: id, label (y un ícono o descripción opcional). |
childrenobligatoria | ReactNode | - | La etiqueta de la acción principal. |
className | string | - | Clases extra para el elemento raíz. |
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" | - | Dónde va el spinner mientras carga: center (cubre la etiqueta, por defecto), start o end (toma el lugar del ícono). |
menuLabel | string | - | Nombre del botón de menú. Por defecto "Más opciones". |
onAction | ((id: Key) => void) | - | Se llama con el id de la acción del menú elegida. |
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"> | 'md' | 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. |
CompoundButton props
Un botón alto con un título y una segunda línea: opciones en un estado vacío, "Crear desde plantilla", pantallas de inicio.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El texto principal. |
description | ReactNode | - | Una segunda línea, más pequeña, debajo. |
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. |
icon | ReactNode | - | Un ícono a la izquierda, más grande que en un Button. |
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). |
loadingPosition | "start" | "end" | "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"> | 'lg' | 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" | 'ghost' | 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.
ButtonGroup
- Variantes
orientationhorizontalvertical- Estados
- Keyboard focus
- 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-btn-group- Atributos data
data-orientation=verticaldata-attached
SplitButton
- Variantes
justifystartcenterbetweenloadingPositionstartendcentershapepillroundedsquaretonedangerneutralaccentsuccesswarninginfovariantghostprimarysecondarysofttextdasheddangerlink- 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-split-btn
CompoundButton
- Variantes
justifystartcenterbetweenloadingPositionstartendcentershapepillroundedsquaretonedangerneutralaccentsuccesswarninginfovariantghostprimarysecondarysofttextdasheddangerlink- 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-compound-button.alea-compound-text.alea-compound-title.alea-compound-desc- Atributos data
data-variant=primarydata-variant=secondary
Accesibilidad
- El grupo tiene role group; dale un aria-label cuando los botones solo tienen sentido juntos (Zoom, Alineación).
- El botón de menú del botón dividido tiene su propio nombre (Más opciones) y abre un menú real.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Se mueve entre los botones |
| Enter o Espacio (botón de menú) | Abre el menú |
| Flechas | Moverse en el menú |
Qué hacer y qué evitar
Hacer
- Pon la acción más común en la cara del botón dividido.
Evitar
- No escondas acciones destructivas en el menú sin una confirmación.
En Figma
Grupo de botones con 2 a 4 botones unidos; botón dividido con Variant y Size.