'/%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
ToggleGroup y Toolbar
Botones de alternancia donde uno o varios pueden estar activos, y una barra de herramientas que es una sola parada de Tab con flechas adentro. Dale items a Toolbar y muestra lo que cabe y mueve el resto a un menú Más.
import { ToggleGroup, Toolbar } from '@alea/ui';
Ejemplos
Barra de formato
Una parada de Tab; las flechas se mueven. Negrita, cursiva y subrayado se alternan de forma independiente, la alineación es una de tres.
Con etiquetas
Un selector de vista con íconos y palabras.
Barra de herramientas que se ajusta
Pasa items y la barra muestra lo que cabe; el resto pasa a un menú Más, empezando por los últimos. Arrastra la esquina de la caja para cambiar su tamaño.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Icon Only
iconOnly - Size
size
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.
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-border…--alea-border-strong…--alea-chip-bg…--alea-surface-deep…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-muted…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…
Shadow
--alea-shadow-card…
Motion
--alea-motion-duration-fast…
Props
ToggleGroup props
Un conjunto de botones de alternancia, uno o varios activos: negrita/cursiva, modos de vista, filtros.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Qué controla el grupo, para lectores de pantalla ("Estilo de texto"). |
itemsobligatoria | { id: Key; label: string; icon?: ReactNode; isDisabled?: boolean | undefined; }[] | - | Botones: id, label y un ícono. Con iconOnly la etiqueta pasa a ser el nombre accesible. |
className | string | - | Clases extra para el elemento raíz. |
defaultValue | Key[] | - | Los ids presionados al inicio. |
iconOnly | boolean | - | Muestra solo los íconos. |
onChange | ((keys: Key[]) => void) | - | Se llama con los ids presionados. |
selectionMode | "single" | "multiple" | 'single' | single (como botones de radio) o multiple (como casillas). Por defecto single. |
size | "sm" | "md" | 'md' | sm (26 px) o md (32 px, por defecto). |
value | Key[] | - | Los ids presionados (controlado). |
Toolbar props
Una fila de controles que es una sola parada de Tab; las flechas se mueven adentro (barras de editores, herramientas de tabla). Pasa items y pliega lo que no cabe en un menú Más.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
items | ToolbarItem[] | - | Las acciones como datos. Las que no caben pasan a un menú Más al final, empezando por las últimas (desbordamiento por prioridad). |
itemStyle | "icon" | "label" | 'icon' | Con items: botones de ícono con tooltips (por defecto), o botones con etiquetas. |
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.
ToggleGroup
- Variantes
selectionModesinglemultiplesizesmmd- Estados
- SelectedHoverDisabled
- Motion
- glidepress
- 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-toggle-item.alea-toggle-icon.alea-toggle-label.alea-sel-indicator.alea-toggle-group- Atributos data
data-size=smdata-icon-onlydata-multiple
Toolbar
- Variantes
itemStyleiconlabel- 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-toolbar-probe.alea-toolbar.alea-toolbar-sep.alea-toolbar-fit- Atributos data
data-orientation=vertical
Accesibilidad
- Cada alternancia es un botón con aria-pressed.
- Las alternancias solo con ícono toman su etiqueta como nombre accesible.
- Toolbar tiene role toolbar: una parada de Tab, las flechas se mueven adentro.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra y sale de la barra de herramientas |
| Flecha izquierda / Derecha | Moverse entre controles |
| Espacio o Enter | Alterna |
Qué hacer y qué evitar
Hacer
- Usa single para opciones exclusivas (alineación) y multiple para independientes (negrita, cursiva).
- Dale etiquetas a las alternancias solo con ícono.
Evitar
- No lo uses para navegar: usa Tabs.
- No mezcles comportamiento single y multiple en un grupo.