Componentes/Segmented Control

Segmented Control

Controle de abas compacto. De 2 a 6 tabs. Container arredondado com radius 64px.

Formulário / Controles

Figma: 1655:25490

Preview

Código

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

<!-- 2 tabs -->
<div class="trdr-segment-control">
  <span class="trdr-segment trdr-segment-active">Avançado</span>
  <span class="trdr-segment trdr-segment-inactive">Simples</span>
</div>

<!-- 5 tabs -->
<div class="trdr-segment-control">
  <span class="trdr-segment trdr-segment-active">Filtro 1</span>
  <span class="trdr-segment trdr-segment-inactive">Filtro 2</span>
  <span class="trdr-segment trdr-segment-inactive">Filtro 3</span>
  <span class="trdr-segment trdr-segment-inactive">Filtro 4</span>
  <span class="trdr-segment trdr-segment-inactive">Filtro 5</span>
</div>

Dimensões

Variante	Largura	Altura
Default	`—`	`28px`

Props / Variantes

Prop	Tipo	Valores
`Tabs`	enum	`23456`
`State`	enum	`DefaultActive`

Tokens Utilizados

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

Anatomia

[Container radius-full bg surface.secondary]
  └── [Tab 1] [Tab 2] [Tab N...]
      Padding: 2px no container