Abas

Barra de abas horizontal. Aba ativa com fundo surface.secondary.

Navegação

Figma: 253:2861

Preview

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<div class="trdr-abas">
  <div class="trdr-abas-item trdr-abas-item-active">
    <span>Todos os tokens</span>
  </div>
  <div class="trdr-abas-item">
    <span>Primitivos</span>
  </div>
  <div class="trdr-abas-item">
    <span>Semânticos</span>
  </div>
  <div class="trdr-abas-item">
    <span>Scale</span>
  </div>
  <div class="trdr-abas-item">
    <span>Tipografia</span>
  </div>
</div>

Dimensões

Variante	Largura	Altura
Default	`476px`	`45px`

Tokens Utilizados

Propriedade	Token	Valor
Tab ativa BG	`action.secondary.default`	`#4A4A4A`
Tab inativa text	`content.tertiary`	`#A4A4A4`

Notas

Estilo 2 de abas: fundo na tab ativa. Diferente do header-window (bottom-border) e pill tabs.