Button Nuevo

El componente hp-button es el elemento básico de interacción. Provee una base sólida y accesible (WAI-ARIA Button) para crear botones, enlaces que parecen botones o interruptores binarios, con total libertad creativa en el diseño visual.

Demostración

Sin estilos (solo base.css)

Así se ve hp-button usando únicamente @headless-primitives/utils/base.css — sin ningún estilo visual adicional. El comportamiento (foco, disabled, teclado) funciona completamente.

BotónDeshabilitadoToggle

Con estilos personalizados

Botón PrimarioSecundarioDeshabilitado

index.html

<hp-button class="my-btn"> Click me </hp-button>

<hp-button class="my-btn" disabled> Can't click </hp-button>

style.css

.my-btn {
  padding: 10px 20px;
  background: var(--vp-c-brand-1);
  color: white;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.my-btn:focus-visible {
  outline: 2px solid var(--vp-c-brand-1);
  outline-offset: 2px;
}

.my-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

Instalación

pnpm

pnpm add @headless-primitives/button

npm

npm install @headless-primitives/button

yarn

yarn add @headless-primitives/button

bun

bun add @headless-primitives/button

Features

• ⌨️ Activación por teclado con Enter y Space.
• ♿️ role="button" y aria-disabled gestionados automáticamente.
• 🎨 Sin estilos visuales (Headless).
• 🔄 Modo Toggle integrado (aria-pressed) con emisión de hp-change.

Anatomía

<hp-button></hp-button>

API Reference

hp-button

Custom element de un solo nodo con rol button por defecto, activable con teclado (Enter / Space). Si existe aria-pressed, actúa como interruptor y emite hp-change.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
disabled	boolean	false	Si está presente, quita el foco por tabulación y establece aria-disabled="true".
aria-pressed	"true" | "false"	—	Si está definido, cada activación alterna el valor y dispara hp-change.

Eventos

Evento	Detalle	Descripción
hp-change	{ pressed: boolean }	Solo cuando hay aria-pressed y cambia el estado.

Atributos ARIA gestionados automáticamente

• role="button" — Asignado automáticamente si no se especifica.
• aria-disabled — Sincronizado con el atributo disabled.
• tabindex="0" — Forzado cuando no está deshabilitado.
• data-state — "on" | "off" cuando opera en modo toggle.

Accesibilidad

Adhiere al patrón WAI-ARIA APG para Button.

Navegación por teclado

Tecla	Acción
Enter	Activa el botón.
Space	Activa el botón.

Ejemplos

Modo Toggle (Interruptor)

<hp-button aria-pressed="false">Favorito ♡</hp-button>

<script>
  const btn = document.querySelector("hp-button");
  btn.addEventListener("hp-change", (e) => {
    btn.textContent = e.detail.pressed ? "Favorito ♥" : "Favorito ♡";
  });
</script>

Botón Deshabilitado

<hp-button disabled>No disponible</hp-button>