C5 · Componentes

Tabs

Alterna entre visualizações relacionadas na mesma superfície. Aba ativa marcada por borda inferior na cor de assinatura. Triggers em peso 600.

Anatomia

Lista de triggers (role='tablist') + painéis correspondentes (role='tabpanel'). Cada trigger mapeia para um painel via aria-controls.

<div role="tablist" aria-label="Seções do drop">
  <button role="tab" aria-selected="true" aria-controls="p1">Resumo</button>
  <button role="tab" aria-selected="false" aria-controls="p2">Código</button>
  <button role="tab" aria-selected="false" aria-controls="p3">Discussão</button>
</div>
<div id="p1" role="tabpanel" tabindex="0">...</div>

Estilo visual

Estado	Visual
default	Texto cinza, sem borda.
hover	Texto tinta, borda inferior em `--n-fog`.
active	Texto tinta peso 600, borda inferior 2px `--accent-base`.
focus	Outline 3px `--accent-base`, offset 2px.

Faça e não faça

Faça

Use 2–5 abas. Mais que isso, considere navegação lateral.
Mantenha labels curtos (1–2 palavras).
Persistir aba ativa via URL (#tab=x) quando faz sentido para o usuário.

Não faça

Não use tabs para navegação entre páginas — isso é navegação principal.
Não esconda informação crítica em abas secundárias.
Não combine tabs com accordion no mesmo conteúdo.

Acessibilidade

Setas ←/→ navegam entre tabs; Home/End vai ao primeiro/último.
Tab (teclado) sai do tablist após selecionar.
aria-selected reflete o estado correto.
Painel inativo: hidden ou display:none para esconder de leitores.