Button
Dispara una acción o evento. Soporta múltiples variantes, tamaños y composiciones incluyendo solo-ícono y layouts agrupados.
Variantes
Usá la prop variant para cambiar el peso visual del botón.
Tamaños
Usá la prop size para ajustar las dimensiones del botón.
Con Íconos
Ubicá íconos antes o después de la etiqueta. Usá size='icon' para botones solo-ícono.
Destructive
Para acciones irreversibles o peligrosas.
Estados
Disabled bloquea la interacción. Loading comunica acciones en progreso — hacé click en 'Guardar cambios' para el demo.
Button Group
Agrupá botones adyacentes en un control unificado. Los bordes se colapsan automáticamente.
Como Link
Usá asChild para renderizar los estilos del botón en cualquier elemento, incluyendo el Link de Next.js para navegación del lado del cliente.
Referencia completa
Matriz exhaustiva por variante. Eje X: tamaños disponibles. Eje Y: estados visuales. Los estados Hover y Pressed se renderizan de forma estática para su inspección.
| Estado | SM | Default | LG | Icon SM | Icon | Icon LG |
|---|---|---|---|---|---|---|
| Enabled | ||||||
| Hover | ||||||
| Pressed | ||||||
| Loading | ||||||
| Disabled |
| Estado | SM | Default | LG | Icon SM | Icon | Icon LG |
|---|---|---|---|---|---|---|
| Enabled | ||||||
| Hover | ||||||
| Pressed | ||||||
| Loading | ||||||
| Disabled |
| Estado | SM | Default | LG | Icon SM | Icon | Icon LG |
|---|---|---|---|---|---|---|
| Enabled | ||||||
| Hover | ||||||
| Pressed | ||||||
| Loading | ||||||
| Disabled |
| Estado | SM | Default | LG | Icon SM | Icon | Icon LG |
|---|---|---|---|---|---|---|
| Enabled | ||||||
| Hover | ||||||
| Pressed | ||||||
| Loading | ||||||
| Disabled |
| Estado | SM | Default | LG |
|---|---|---|---|
| Enabled | |||
| Hover | |||
| Pressed | |||
| Loading | |||
| Disabled |
| Estado | SM | Default | LG | Icon SM | Icon | Icon LG |
|---|---|---|---|---|---|---|
| Enabled | ||||||
| Hover | ||||||
| Pressed | ||||||
| Loading | ||||||
| Disabled |