Pestañas

Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.

Bajo la cabecera, para las partes de un registro (Ficha, Guías, Facturas, Actividad) o de una sección.

Vista · datos de ejemplo

Anatomía

Franja blanca con borde inferior
Pestaña activa en navy con línea naranja de 2 px
Contador opcional en etiqueta de sistema

Sí

Rutas en inglés por pestaña (/contacts/123/dispatch)
Desplazable en teléfono

No más de 6 pestañas
No las uses para filtros: eso va en la barra de la lista

HTML exacto

<div class="nu-pestanas" role="tablist" aria-label="Juanito SpA">
  <button type="button" role="tab" class="nu-pestana" aria-selected="true">Ficha</button>
  <button type="button" role="tab" class="nu-pestana" aria-selected="false">Guías <span class="nu-pestana__cuenta">12</span></button>
  <button type="button" role="tab" class="nu-pestana" aria-selected="false">Facturas <span class="nu-pestana__cuenta">8</span></button>
  <button type="button" role="tab" class="nu-pestana" aria-selected="false">Actividad</button>
</div>

Clases: .nu-pestanas .nu-pestana .nu-pestana__cuenta · Fragmento: snippets/tabs.html