Botón

Ejemplo

Vista real construida con los archivos compilados de Ally.

Grupo de acciones relacionadas

Usa grupos compactos para acciones del mismo contexto. Cada botón conserva su nombre y orden de teclado.

<div class="stack-r">
<button class="ally-btn ally-btn-primary" type="button">Primario</button>
<button class="ally-btn ally-btn-secondary" type="button">Secundario</button>
<button class="ally-btn ally-btn-danger" type="button">Destructivo</button>
<button class="ally-btn" type="button" disabled>Deshabilitado</button>
</div>

<div class="ally-btn-group" role="group" aria-label="Acciones del documento">
  <button class="ally-btn" type="button">Ver</button>
  <button class="ally-btn" type="button">Editar</button>
  <button class="ally-btn" type="button">Compartir</button>
</div>

Contrato accesible

Propósito

Ejecuta una acción con nombre y type explícitos.

Clases CSS

.ally-btn y modificadores de estado documentados.

HTML

Elemento semántico correspondiente, heading o nombre accesible y controles nativos.

ARIA

Usa HTML nativo primero y añade nombre, estado o relaciones ARIA solo cuando el patrón lo requiera.

Teclado

Tab sigue el orden lógico; los elementos nativos conservan su comportamiento estándar.

Foco

Foco visible y predecible; overlays devuelven el foco al control que los abrió.

Estados

closed, open, active, selected, expanded, disabled y loading según aplique.

Ally Debug

Valida estructura, nombres, relaciones, controles y estados detectables dentro del scope.

Estados y variantes

Los estados visibles deben acompañarse de texto, atributos nativos o propiedades ARIA; nunca dependen solo del color.

Accesibilidad

No hacer

<div class="ally-btn">Contenido sin elemento semántico, nombre accesible ni estados asociados.</div>