Buttons

Clase base .cl-btn. Combiná un modificador de tono (--primary, --secondary, --ghost, --positive, --danger) con un modificador de tamaño opcional (--sm, --lg).

Primario

Acción principal de la pantalla o del formulario. Máximo uno por vista.

<button class="cl-btn cl-btn--primary"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Crear registro</button>

Secundario

Acciones alternativas junto a la primaria (exportar, filtrar, ver detalle).

<button class="cl-btn cl-btn--secondary"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v12M6 11l6 6 6-6"/><path d="M4 20h16"/></svg>Exportar</button>

Ghost

Acciones de bajo énfasis: cancelar, cerrar, descartar. Sin fondo ni borde en reposo.

<button class="cl-btn cl-btn--ghost">Cancelar</button>

Positivo

Confirmar o aprobar un cambio de estado (aprobar, validar, publicar).

<button class="cl-btn cl-btn--positive"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Aprobar</button>

Peligro

Acciones destructivas o irreversibles (eliminar, revocar, dar de baja).

<button class="cl-btn cl-btn--danger"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/></svg>Eliminar</button>

Tamaños

El tamaño por defecto sirve para la mayoría de los casos. --sm para toolbars densas, --lg para CTAs destacados.

<button class="cl-btn cl-btn--primary cl-btn--sm">Small</button>
<button class="cl-btn cl-btn--primary">Default</button>
<button class="cl-btn cl-btn--primary cl-btn--lg">Large</button>

Solo ícono

Para acciones secundarias sin espacio para texto (más opciones, cerrar). Agregá title o aria-label para accesibilidad.

<button class="cl-btn cl-btn--secondary cl-btn--sm cl-btn--icon" aria-label="Más opciones"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></svg></button>

Grupo de botones

Selector segmentado para alternar entre opciones mutuamente excluyentes (rangos de fecha, vistas).

<div class="cl-btn-group">
  <button class="cl-btn is-active">Mes</button>
  <button class="cl-btn">Trimestre</button>
  <button class="cl-btn">Año</button>
</div>