Button
Control clickeable para acciones con soporte de carga, deshabilitado y variantes.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Button renderiza un control clickeable para acciones con semántica accesible. Soporta un estado de carga, estado deshabilitado y múltiples partes de componente: Root, IconButton, ToggleButton y ButtonGroup.
Uso
Button expone cuatro partes. Usa Root para botones de acción estándar, IconButton para botones solo con icono, ToggleButton para estados alternables y ButtonGroup para diseños de botones agrupados.
import * as Button from "@solidiom/button"
;<Button.Root onClick={() => alert("clickeado")}>Haz clic</Button.Root>Instalación
Instala el paquete con pnpm add @solidiom/button. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Root
El botón estándar. Acepta props disabled, loading, type, onClick y aria-label.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
children | JSX.Element | — | Contenido del botón. |
disabled | boolean | — | Si el botón está deshabilitado. |
loading | boolean | — | Si el botón está en estado de carga. Establece aria-busy="true". |
type | "button" | "submit" | "reset" | "button" | Tipo nativo del botón. |
onClick | () => void | — | Manejador de clic. |
aria-label | string | — | Etiqueta accesible para el botón. |
IconButton
Un botón destinado a contenido solo con icono. Requiere aria-label y envuelve los hijos en aria-hidden="true".
ToggleButton
Un botón que mantiene un estado presionado. Gestiona aria-pressed y llama a onPressedChange al activarse.
ButtonGroup
Un contenedor de diseño que agrupa botones con role="group" y soporte de orientación.
Estilos
Button lleva los atributos data-scope="button" y data-part para seleccionar:
Root:data-part="root", condata-disabledydata-loadingcuando correspondanIconButton:data-part="root"(envuelve Root)ToggleButton:data-part="toggle", condata-state="on"odata-state="off"ButtonGroup:data-part="group", condata-orientation
Aplica tu receta visual — variantes (default, destructive, outline, secondary, ghost) y tamaños (default, sm, lg, icon) — usando estos atributos data para seleccionar.
Interacción con teclado
Button soporta la activación estándar de botones:
- Enter o Space activa el botón cuando tiene foco.
- Los estados deshabilitado y de carga previenen la activación.
Renderizado SSR e hidratación
Button se renderiza como un elemento nativo <button>. No requiere hidratación en el cliente para renderizado estático. El estado interactivo (loading, disabled) se gestiona a través de props.