Tabs

Navegación por pestañas: .cl-tabs contiene .cl-tab (estado activo .is-active) con un contador opcional .cl-tab-count. Funciona con <button> (cambia contenido en el cliente) o <a> (navega a otra URL).

Con íconos y contador

Cada pestaña puede combinar ícono, texto y contador.

<div class="cl-tabs">
  <button class="cl-tab is-active"><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"><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></svg> Resumen <span class="cl-tab-count">12</span></button>
  <button class="cl-tab"><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="9" cy="8" r="3.2"/><path d="M3.5 19c.6-3 2.9-4.5 5.5-4.5s4.9 1.5 5.5 4.5"/><circle cx="17" cy="9" r="2.4"/><path d="M16 14.6c2.6.2 4.4 1.7 4.9 4.4"/></svg> Detalle <span class="cl-tab-count">147</span></button>
  <button class="cl-tab"><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"><rect x="3" y="6" width="18" height="13" rx="2"/><circle cx="12" cy="12.5" r="3"/><path d="M7 9.5h.01M17 15.5h.01"/></svg> Movimientos</button>
  <button class="cl-tab"><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="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg> Documentos</button>
</div>

Solo contador

El patrón más común en un list-report: nombre de filtro + cantidad.

<div class="cl-tabs">
  <button class="cl-tab is-active">Todos <span class="cl-tab-count">147</span></button>
  <button class="cl-tab">Activos <span class="cl-tab-count">143</span></button>
  <button class="cl-tab">En revisión <span class="cl-tab-count">3</span></button>
  <button class="cl-tab">Inactivos <span class="cl-tab-count">1</span></button>
  <button class="cl-tab">Nuevos <span class="cl-tab-count">3</span></button>
</div>

Como enlaces

Para navegación entre secciones de una página de detalle, usá <a> en vez de <button>.

<nav class="cl-tabs">
  <a class="cl-tab is-active" href="#">General</a>
  <a class="cl-tab" href="#">Items <span class="cl-tab-count">2</span></a>
  <a class="cl-tab" href="#">Calendario <span class="cl-tab-count">14</span></a>
  <a class="cl-tab" href="#">Eventos</a>
  <a class="cl-tab" href="#">Documentos</a>
  <a class="cl-tab" href="#">Historial</a>
</nav>

Sticky, bajo un header de objeto

.cl-tabs--sticky fija las pestañas debajo de un .cl-object-head al hacer scroll dentro de una página de detalle.

<div class="cl-object-page">
  <header class="cl-object-head">
    <div class="cl-breadcrumb">
      <a href="#">Listado</a><span class="cl-breadcrumb-sep">/</span><span class="cl-breadcrumb-current">Ana Solís Vargas</span>
    </div>
    <div class="cl-object-head-row">
      <div>
        <div class="cl-page-eyebrow">Registro · Activo</div>
        <h1 class="cl-page-title">Ana Solís Vargas</h1>
        <div class="cl-page-meta">Código 1-1234-5678 · Creado 2 mar 2022</div>
      </div>
      <div class="cl-page-actions">
        <button class="cl-btn cl-btn--ghost">Cancelar</button>
        <button class="cl-btn cl-btn--primary">Guardar cambios</button>
      </div>
    </div>
  </header>
  <nav class="cl-tabs cl-tabs--sticky">
    <a class="cl-tab is-active" href="#">General</a>
    <a class="cl-tab" href="#">Items <span class="cl-tab-count">2</span></a>
    <a class="cl-tab" href="#">Documentos</a>
  </nav>
  <div class="cl-object-body">Contenido de la pestaña activa…</div>
</div>