'/%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
SegmentedControl
Una opción entre dos y cinco, como una fila de píldoras. ToggleButton es la versión de un solo encendido o apagado.
import { SegmentedControl, ToggleButton } from '@alea/ui';
Ejemplos
Control segmentado
Una opción corta y exclusiva. La primera opción queda seleccionada salvo que definas una.
Showing: week
Pequeño
Para barras de herramientas y paneles densos.
ToggleButton
Un botón que queda presionado, como Negrita. aria-pressed lo indica a los lectores de pantalla.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Size
size - Orientation
orientation
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-chip-bg…--alea-chip-text…--alea-surface-deep…--alea-text…--alea-text-muted…
Space
--alea-space-3…--alea-space-4…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Props
SegmentedControl props
Una opción entre pocas, como una fila de píldoras.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | { id: Key; label: ReactNode; isDisabled?: boolean | undefined; }[] | - | Las opciones: id y label. |
aria-label | string | - | Etiqueta para lectores de pantalla. |
defaultValue | Key | - | El id seleccionado al inicio. |
onChange | ((value: Key) => void) | - | Se llama con el id de la opción elegida. |
size | "sm" | "md" | 'md' | sm (28 px) o md (34 px, por defecto). |
value | Key | - | El id seleccionado (controlado). |
ToggleButton props
Un botón que queda presionado (negrita, silenciar, fijar).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
size | "sm" | "md" | 'md' | sm (32 px) o md (40 px, por defecto). |
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.
Size
Oscuro
size="sm" | size="md" | |
|---|---|---|
Claro
size="sm" | size="md" | |
|---|---|---|
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
SegmentedControl
- Variantes
sizesmmd- Estados
- HoverSelectedDisabled
- 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-segmented.alea-segmented-item.alea-segmented-label.alea-sel-indicator- Atributos data
data-size=sm
ToggleButton
- Variantes
sizesmmd- Estados
- HoverSelectedDisabled
- Motion
- press
- 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-button- Atributos data
data-size=sm
Accesibilidad
- El grupo es un grupo de radio: siempre hay una opción elegida y se anuncia así.
- ToggleButton es un botón con aria-pressed.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra al grupo (a la opción elegida) |
| Flechas | Se mueven entre opciones |
| Enter o Espacio | Elige la opción con foco |
Qué hacer y qué evitar
Hacer
- Úsalo para vistas del mismo contenido (Día, Semana, Mes).
- Mantén los textos cortos, una o dos palabras.
Evitar
- No lo uses para más de cinco opciones: usa Select.
- No lo uses para acciones: usa Buttons.
En Figma
Control segmentado de 2 a 5 opciones y una propiedad Selected por opción.