19/Acciones y etiquetas

Botones

Cuatro variantes principales, tres tamaños, iconos y estados de deshabilitado y carga.

Variantes

Enlace

HTML

<button class="cb-btn cb-btn--primary" type="button">Primario ↗</button>
<button class="cb-btn cb-btn--outline" type="button">Outline</button>
<button class="cb-btn cb-btn--ghost" type="button">Ghost</button>
<button class="cb-btn cb-btn--soft" type="button">Soft</button>
<button class="cb-btn cb-btn--danger" type="button">Eliminar</button>
<a class="cb-btn cb-btn--link" href="#">Enlace</a>

Tamaños

HTML

<button class="cb-btn cb-btn--primary cb-btn--sm" type="button">Pequeño</button>
<button class="cb-btn cb-btn--primary" type="button">Mediano</button>
<button class="cb-btn cb-btn--primary cb-btn--lg" type="button">Grande</button>

Con icono

HTML

<button class="cb-btn cb-btn--primary" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Nuevo</button>
<button class="cb-btn cb-btn--outline" type="button">Descargar<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 4v12m0 0-5-5m5 5 5-5M4 20h16"/></svg></button>
<button class="cb-btn cb-btn--outline cb-btn--icon" type="button" aria-label="Más opciones"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg></button>
<button class="cb-icon-btn" type="button" aria-label="Editar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/></svg></button>

Deshabilitado y cargando

Para un enlace deshabilitado usa aria-disabled="true". El estado de carga mantiene el ancho y muestra un spinner; usa aria-busy="true" o la clase is-loading.

Enlace inactivo

HTML

<button class="cb-btn cb-btn--primary" type="button" disabled>Deshabilitado</button>
<a class="cb-btn cb-btn--outline" aria-disabled="true">Enlace inactivo</a>
<button class="cb-btn cb-btn--primary" type="button" aria-busy="true"><span>Guardando</span></button>
<button class="cb-btn cb-btn--outline" type="button" aria-busy="true"><span>Cargando</span></button>

Grupo de acciones

cb-actions separa los botones y en móvil los estira a todo el ancho.

Cotizar ↗ Ver servicios

HTML

<div class="cb-actions mt-0">
  <a href="#" class="cb-btn cb-btn--primary">Cotizar ↗</a>
  <a href="#" class="cb-btn cb-btn--outline">Ver servicios</a>
</div>

Clases y modificadores

Clase	Descripción
`.cb-btn`	Base: 38px de alto, 13px, semibold.
`.cb-btn--primary`	Relleno de acento con `--cb-accent-bg` y texto `--cb-accent-ink`.
`.cb-btn--outline`	Borde fino (el "ghost" del diseño original).
`.cb-btn--ghost`	Sin borde, fondo solo en hover.
`.cb-btn--soft`	Fondo de acento suave.
`.cb-btn--danger`	Acción destructiva.
`.cb-btn--link`	Parece un enlace subrayado.
`.cb-btn--sm`, `.cb-btn--lg`	Tamaños de 30px y 44px.
`.cb-btn--icon`	Botón cuadrado solo con icono.
`.cb-btn--block`	Ancho completo.
`.is-loading`	Estado de carga (equivale a `aria-busy="true"`).
`.cb-icon-btn`	Botón de icono con borde de 36px.
`.cb-actions`	Fila de botones; `--center` los centra.

Accesibilidad

Los botones solo con icono necesitan aria-label.
Usa button para acciones y a para navegación.
aria-busy="true" comunica que la acción está en curso.
El foco visible usa el color de acento con 2px de contorno.