'/%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
IconButton
Un botón con solo un ícono, para barras de herramientas y lugares compactos. Necesita un aria-label.
import { IconButton } from '@alea/ui';
Ejemplos
Botones de ícono
Todos los estilos de Button, con un aria-label en vez de una etiqueta visible. Agrega un Tooltip con las mismas palabras.
Tamaños y formas
Círculo por defecto, cuadrado con el radio de los controles.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Shape
shape - Size
size - Tone
tone - Tooltip
tooltip - Variant
variant
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.
Radius
--alea-radius-sm…--alea-radius-xs…
Component
--alea-button-h…--alea-button-icon…--alea-icon-button-icon…
Props
IconButton props
Un botón con solo un ícono. aria-label es obligatorio; tooltip también lo muestra a quienes ven la pantalla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Qué hace el botón, para lectores de pantalla (el ícono no tiene texto). |
childrenobligatoria | ReactNode | - | El ícono. |
href | string | - | Convierte el botón en un enlace con aspecto de botón. |
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ó. |
rel | string | - | Con href: la relación del enlace. |
ripple | boolean | - | Una onda crece desde el puntero al presionar (el patrón ripple). |
shape | "rounded" | "square" | "circle" | 'circle' | circle (por defecto), rounded (8 px) o square (esquinas de 4 px). |
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. |
tooltip | boolean | - | Muestra aria-label en un tooltip con hover y foco. |
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.
Variant × size
Oscuro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
variant="primary" | |||
variant="secondary" | |||
variant="ghost" | |||
variant="danger" |
Claro
size="sm" | size="md" | size="lg" | |
|---|---|---|---|
variant="primary" | |||
variant="secondary" | |||
variant="ghost" | |||
variant="danger" |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Shape
Oscuro
shape="circle" | shape="square" | |
|---|---|---|
Claro
shape="circle" | shape="square" | |
|---|---|---|
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
- Variantes
shaperoundedsquarecircletonedangerneutralaccentsuccesswarninginfovariantghostprimarysecondarysofttextdasheddangerlink- Motion
- tint
- 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-icon-button.alea-button-icon- Atributos data
data-icon-shape=roundeddata-icon-shape=squaredata-attached
Accesibilidad
- Los tipos exigen aria-label: el ícono solo no tiene nombre.
- Acompáñalo con un Tooltip que repita el nombre para quienes usan mouse.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Lo presiona |
Qué hacer y qué evitar
Hacer
- Usa íconos conocidos (cerrar, buscar, más).
- Agrega un Tooltip con el mismo texto que el nombre.
Evitar
- No lo uses para la acción principal de una pantalla: un Button con texto es más claro.
En Figma
Set de botón de ícono: Variant × Size × Shape (Circle, Square) × State.