Button

Acciones primarias y secundarias. Usa el bloque BEM .cl-button del Kit Digital.

Primario

<button class="cl-button" type="button">
  <span class="cl-button__label">Guardar cambios</span>
</button>

Con icono

<button class="cl-button" type="button">
  <span class="cl-button__icon cl-icon" data-icon="add-circle" aria-hidden="true"></span>
  <span class="cl-button__label">Agregar</span>
</button>

Variantes

<button class="cl-button" type="button">
  <span class="cl-button__label">Primario</span>
</button>

<button class="cl-button cl-button--secondary" type="button">
  <span class="cl-button__label">Secundario</span>
</button>

<button class="cl-button cl-button--tertiary" type="button">
  <span class="cl-button__label">Terciario</span>
</button>

Deshabilitado

<button class="cl-button" type="button" disabled>
  <span class="cl-button__label">No disponible</span>
</button>

• Un botón por acción: el primario destaca la acción principal de la pantalla o flujo; usa como máximo un primario visible a la vez en el mismo contexto.
• El secundario y el terciario son para acciones alternativas o de menor jerarquía junto al primario (por ejemplo "Cancelar" junto a "Guardar").
• El ícono, cuando se usa, va antes del label y es siempre decorativo (aria-hidden="true"); el texto del cl-button__label debe bastar por sí solo para entender la acción.
• Usa el atributo nativo disabled, no una clase visual, para el estado no disponible.

• El elemento real debe ser <button type="button"> (o type="submit" dentro de un formulario); no un <div> o <a> estilizado como botón salvo que la acción navegue a otra URL.
• El foco visible (focus-visible) ya viene resuelto por el componente; no lo sobrescribas con CSS local.
• Con disabled, el botón queda fuera del orden de tabulación automáticamente — no hace falta tabindex="-1" adicional.