Design System
GitHub
FigmaPropósito
Acción compacta
Un botón solo con ícono para acciones conocidas: favoritos, cerrar, buscar.
Siempre redondo
Cuatro tamaños (36, 40, 44, 48 px) con área táctil mínima de 44 px.
Con aria-label
Sin texto visible, el nombre accesible es obligatorio.
Anatomía
Cada número es una parte del componente real: hacé clic para ver sus propiedades y tokens.
Hacé clic en un número para ver las propiedades y los tokens de esa parte.
Configuración
El componente real, en vivo.
Variante
La función iconButtonClasses() arma las clases.
Sin fondo; el fondo aparece en hover. Por defecto.
Tamaño
El área táctil es de 44 px aunque el botón sea más chico.
size sm.
Con texto
Ícono + texto corto, por ejemplo «Ingresar» en el header.
label
Mismo alto que el tamaño; el ancho depende del texto.
Tokens
Los tokens globales que usa el CSS real del componente.
| Token | Valor |
|---|---|
| 9999px | |
| 150ms | |
| cubic-bezier(0.4, 0, 0.2, 1) | |
| 2px | |
| #e30613 | |
| 2px | |
| #d4d4d4 | |
| 44px | |
| 36px | |
| 40px | |
| 48px | |
| 6px | |
| 12px | |
| 14px | |
| 20px | |
| 500 | |
| #1a1a1a | |
| #e4e4e4 | |
| #f5f5f5 | |
| #ffffff | |
| #e30613 | |
| #c20510 | |
| #15803d | |
| #f0fdf4 | |
| #6b6b6b | |
| 8px | |
| 2px |