Tabs

Quando usarWhen to use

Use tabs quandoUse tabs when

O conteúdo é organizado em categorias paralelas e o usuário precisa alternar entre elas sem navegar para outra página. Cada tab representa uma visão mutuamente exclusiva de conteúdo relacionado.Content is organized into parallel categories and the user needs to switch between them without page navigation. Each tab represents a mutually exclusive view of related content.

Não use tabs quandoDon't use tabs when

O conteúdo segue etapas sequenciais (use um stepper), a ação é navegar para páginas diferentes (use links de navegação), ou há mais de 6-7 categorias (considere outro padrão).Content follows sequential steps (use a stepper instead), the action is navigating to different pages (use nav links), or there are more than 6-7 categories (consider a different pattern).

AnatomiaAnatomy

1 2 3

Panel content goes here.

4

1 Lista de tabs (.ds-tabs) — container com role="tablist".Tab list (.ds-tabs) — container with role="tablist".
2 Tab (.ds-tab) — button individual com role="tab".Tab (.ds-tab) — individual tab button with role="tab".
3 Indicador ativo — borda inferior na tab ativa.Active indicator — bottom border on the active tab.
4 Painel da tab — área de conteúdo com role="tabpanel".Tab panel — content area with role="tabpanel".

Tabs padrãoDefault tabs

Uma tab fica ativa, as demais ficam no estado padrão. Cada tab controla um painel correspondente.One tab is active, the others are in their default state. Each tab controls a corresponding panel.

This is the Overview panel content. It provides a summary of your account status and recent activity.

<div class="ds-tabs" role="tablist" aria-label="Account settings">
  <button class="ds-tab ds-tab--active" role="tab"
          aria-selected="true" aria-controls="panel-overview"
          id="tab-overview">Overview</button>
  <button class="ds-tab" role="tab"
          aria-selected="false" aria-controls="panel-settings"
          id="tab-settings" tabindex="-1">Settings</button>
  <button class="ds-tab" role="tab"
          aria-selected="false" aria-controls="panel-activity"
          id="tab-activity" tabindex="-1">Activity</button>
</div>

<div class="ds-tab-panel" role="tabpanel"
     id="panel-overview" aria-labelledby="tab-overview">
  <p>Panel content here.</p>
</div>

Com tab desabilitadaWith disabled tab

Uma tab desabilitada não pode ser interagida e é ignorada durante a navegação por teclado.A disabled tab cannot be interacted with and is skipped during keyboard navigation.

General settings for your account: display name, language, and timezone preferences.

<button class="ds-tab" role="tab"
        aria-selected="false" aria-disabled="true"
        tabindex="-1" disabled>Billing</button>

Múltiplas tabsMultiple tabs

As tabs rolam horizontalmente quando excedem o container.Tabs scroll horizontally when they overflow the container.

Dashboard panel showing project metrics, recent commits, and team activity overview.

<div class="ds-tabs" role="tablist" aria-label="Project tabs">
  <button class="ds-tab ds-tab--active" role="tab" aria-selected="true">Dashboard</button>
  <button class="ds-tab" role="tab" aria-selected="false" tabindex="-1">Issues</button>
  <button class="ds-tab" role="tab" aria-selected="false" tabindex="-1">Pull Requests</button>
  <button class="ds-tab" role="tab" aria-selected="false" tabindex="-1">Actions</button>
  <button class="ds-tab" role="tab" aria-selected="false" tabindex="-1">Projects</button>
  <button class="ds-tab" role="tab" aria-selected="false" tabindex="-1">Wiki</button>
</div>

Boas práticasBest practices

Faça

Use rotulos de 1-2 palavras. Mantenha a primeira tab ativa por padrão.Use 1-2 word labels. Keep the first tab active by default.

Não faça

Rotulos com frases completas. Iniciar sem nenhuma tab selecionada.Full sentence labels. Starting with no tab selected.

Diretrizes de conteúdoContent guidelines

RegraRule	ExemploExample
Use substantivos como rotulosUse nouns as labels	"Overview", "Settings", "Activity" — não "View overview" ou "Go to settings""Overview", "Settings", "Activity" — not "View overview" or "Go to settings"
Mesmo nível hierarquicoSame hierarchy level	Todas as tabs devem representar categorias paralelas do mesmo conteúdoAll tabs should represent parallel categories of the same content
Sem ícones sem textoNo icons without text	Sempre inclua um rotulo de texto — ícones sozinhos são ambíguos no contexto de tabsAlways include a text label — icons alone are ambiguous in tab context
Rotulos curtos (1-2 palavras)Keep labels short (1-2 words)	"Pull Requests" — não "View all pull requests in this project""Pull Requests" — not "View all pull requests in this project"

Mapeamento de tokensToken mapping

PropriedadeProperty	Token (semantic)	Variavel CSSCSS variable
texto (inativo)text (inactive)	`semantic.content.secondary`	`--ds-content-secondary`
texto (ativo)text (active)	`semantic.primary.background.default`	`--ds-primary-background-default`
indicador ativoactive indicator	`semantic.primary.background.default`	`--ds-primary-background-default`
fundo (hover)background (hover)	`semantic.overlay.subtle`	`--ds-overlay-subtle`
focus ring	`semantic.focus.ring.*`	`--ds-focus-ring-width`, `--ds-focus-ring-offset`, `--ds-focus-ring-color`

Classes CSSCSS classes

ClasseClass	DescricaoDescription
`ds-tabs`	Container da lista de tabsTab list container
`ds-tab`	Button individual de tabIndividual tab button
`ds-tab--active`	Tab ativa / selecionadaActive / selected tab
`disabled` (atributo HTML)(HTML attribute)	Tab desabilitada — usar o atributo nativo `disabled`; não existe classe `ds-tab--disabled`Disabled tab — use the native `disabled` attribute; there is no `ds-tab--disabled` class
`ds-tab-panel`	Área de conteúdo do painelTab panel content area

Interação por tecladoKeyboard interaction

TeclaKey	AçãoAction
`Tab`	Move o foco para a lista de tabs, parando na tab ativaMoves focus into the tab list, landing on the active tab
`Arrow Left` / `Arrow Right`	Move para a tab anterior / proxima (ativa automaticamente)Moves to previous / next tab (auto-activates)
`Home`	Move para a primeira tabMoves to the first tab
`End`	Move para a ultima tabMoves to the last tab
`Tab` (da lista)(from list)	Move o foco para o conteúdo do painel ativoMoves focus into the active panel content

Tabs desabilitadas são ignoradas na navegação por setas. Apenas a tab ativa está na sequência Tab (tabindex="0"); todas as outras tem tabindex="-1".Disabled tabs are skipped during arrow key navigation. Only the active tab is in the Tab sequence (tabindex="0"); all others have tabindex="-1".

AccessibilityAccessibility

Criterio WCAGWCAG criterion	RequisitoRequirement	Status
4.1.2 Name, Role, Value (A)	`role="tablist"`, `role="tab"`, `role="tabpanel"`. `aria-selected` nas tabs. `aria-controls` / `aria-labelledby` vinculando tabs a paineis.`role="tablist"`, `role="tab"`, `role="tabpanel"`. `aria-selected` on tabs. `aria-controls` / `aria-labelledby` linking tabs to panels.	✓
2.1.1 Keyboard (A)	Setas navegam entre tabs. `Tab` entra e sai da lista de tabs.Arrow keys navigate between tabs. `Tab` enters and exits the tab list.	✓
2.4.11 Focus Appearance (AA)	Focus ring visível na tab ativa quando focada.Focus ring visible on the active tab when focused.	✓

Resumo dos atributos ARIAARIA attributes summary

role="tablist" — no container da lista de tabs.
role="tab" — em cada button de tab.
role="tabpanel" — em cada painel de conteúdo.
aria-selected="true|false" — indica a tab ativa.
aria-controls — em cada tab, apontando para o ID do painel correspondente.
aria-labelledby — em cada painel, apontando para o ID da tab correspondente.
aria-disabled="true" — em tabs desabilitadas.role="tablist" — on the tab list container.
role="tab" — on each tab button.
role="tabpanel" — on each content panel.
aria-selected="true|false" — indicates the active tab.
aria-controls — on each tab, pointing to the corresponding panel ID.
aria-labelledby — on each panel, pointing to the corresponding tab ID.
aria-disabled="true" — on disabled tabs.