Button
Familia de acciones con siete variantes, ocho tamaños y composiciones para iconos, carga, enlaces y grupos.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
npx shadcn@latest add https://brutallab.facilito.dev/r/button.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
import { Button } from "@/components/ui/button"
export function Example() {
return <Button variant="default">Continue</Button>
}Variantes
Opciones visuales incluidas en la API oficial del componente.
Tamaños
Tamaños consistentes para diferentes densidades y jerarquías.
Default
La acción principal de una vista. Úsala una sola vez por grupo de decisiones.
Outline
Superficie neutra con el mismo contorno, sombra y movimiento que el botón primario.
Secondary
Alternativa visible para una acción importante, pero no principal.
Accent
Variante turquesa para una acción complementaria.
Ghost
Acción discreta para barras de herramientas y espacios compactos.
Destructive
Acción irreversible o de alto riesgo. Debe describir claramente qué elimina.
Link
Apariencia textual para una acción. Si navega a otra página, usa el ejemplo As Link.
Icon
Botón cuadrado para un icono. aria-label es obligatorio cuando no hay texto.
With Icon
Los iconos pueden reforzar una acción antes o después de la etiqueta.
Rounded
Forma de píldora para acciones destacadas sin crear una variante adicional.
Loading
Estado de carga que conserva el texto para explicar qué está ocurriendo.
Button Group
Agrupa acciones relacionadas y mantiene una sola silueta visual.
As Link
Un enlace semántico puede adoptar el estilo del botón con buttonVariants.
RTL
La composición también responde a interfaces de derecha a izquierda.
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
Muestras visuales del botón primario. Debajo puedes comprobar los estados reales con ratón, teclado o tacto.
4px / 0px2px / +2px0px / +4px3px / offset 3pxflat / mutedTab muestra el foco; Enter y Espacio activan. Hover reduce la sombra sin cambiar el grosor del borde. Con movimiento reducido, el estado cambia sin animación.
- Primario, secundario, accent, outline y destructivo: sombra de 4px; hover desplaza 2px y deja 2px de sombra; pulsado desplaza 4px y elimina la sombra.
- Ghost cambia la superficie al pasar el cursor; link se subraya. Disabled bloquea la activación. Loading también bloquea la acción y anuncia aria-busy.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| variant | default | secondary | accent | outline | ghost | destructive | link | default | Define la jerarquía visual. |
| size | xs | sm | default | lg | icon-xs | icon-sm | icon | icon-lg | default | Controla altura, ancho y espaciado. |
| disabled | boolean | false | Desactiva interacción y foco. |
| loading | boolean | false | Muestra un indicador, activa aria-busy y bloquea la acción. Conserva una etiqueta visible. |
| ButtonGroup.orientation | horizontal | vertical | horizontal | Organiza acciones relacionadas en fila o columna. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Conserva el elemento button nativo mediante Base UI.
Los botones que solo contienen iconos necesitan aria-label.
Para navegación usa buttonVariants sobre un enlace semántico.
Los estados de carga conservan una etiqueta visible y aria-busy.
ButtonGroup necesita aria-label o aria-labelledby.