Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogonavigation · stable

Tabs

Abas com roving tabindex e painéis associados. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Tabs quando a interface precisar de abas com roving tabindex e painéis associados.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Indicator animado (padrão)

Indicator animado (padrão), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--indicator">
                    <div class="sc-tablist">
                      <button class="sc-tab" type="button" aria-selected="true">Visão geral</button>
                      <button class="sc-tab" type="button" aria-selected="false">Config</button>
                      <button class="sc-tab" type="button" aria-selected="false">Logs</button>
                    </div>
                    <div class="sc-tabpanel">Conteúdo da visão geral.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo de configuração.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo de logs.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--indicatorsc-tablistsc-tabsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

SmartIcons (sem emojis)

SmartIcons (sem emojis), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--indicator">
                    <div class="sc-tablist">
                      <button class="sc-tab" type="button" aria-selected="true"><i class="sc-icon" data-smart-icon="home"></i> Home</button>
                      <button class="sc-tab" type="button" aria-selected="false"><i class="sc-icon" data-smart-icon="box"></i> Assets</button>
                      <button class="sc-tab" type="button" aria-selected="false"><i class="sc-icon" data-smart-icon="settings"></i> Settings</button>
                    </div>
                    <div class="sc-tabpanel">Conteúdo Home.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo Assets.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo Settings.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--indicatorsc-tablistsc-tabsc-iconsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Pills + contadores

Pills + contadores, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--pills sc-tabs--indicator">
                    <div class="sc-tablist">
                      <button class="sc-tab" type="button" aria-selected="true">Inbox <span class="sc-badge sc-badge-secondary">12</span></button>
                      <button class="sc-tab" type="button" aria-selected="false">Ativos <span class="sc-badge sc-badge-success">3</span></button>
                      <button class="sc-tab" type="button" aria-selected="false">Alertas <span class="sc-badge sc-badge-danger">1</span></button>
                    </div>
                    <div class="sc-tabpanel">Conteúdo Inbox.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo Ativos.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo Alertas.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--pillssc-tabs--indicatorsc-tablistsc-tabsc-badgesc-badge-secondarysc-badge-successsc-badge-dangersc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Underline + indicator (linha animada)

Underline + indicator (linha animada), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--underline sc-tabs--indicator">
                    <div class="sc-tablist">
                      <button class="sc-tab" type="button" aria-selected="true">Visão</button>
                      <button class="sc-tab" type="button" aria-selected="false">Métricas</button>
                      <button class="sc-tab" type="button" aria-selected="false">Atividade</button>
                    </div>
                    <div class="sc-tabpanel">Conteúdo visão.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo métricas.</div>
                    <div class="sc-tabpanel" hidden="">Conteúdo atividade.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--underlinesc-tabs--indicatorsc-tablistsc-tabsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Segmented (switcher)

Segmented (switcher), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--segmented">
                    <div class="sc-tablist">
                      <button class="sc-tab" type="button" aria-selected="true">Hoje</button>
                      <button class="sc-tab" type="button" aria-selected="false">7 dias</button>
                      <button class="sc-tab" type="button" aria-selected="false">30 dias</button>
                    </div>
                    <div class="sc-tabpanel">Dados de hoje.</div>
                    <div class="sc-tabpanel" hidden="">Dados da semana.</div>
                    <div class="sc-tabpanel" hidden="">Dados do mês.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--segmentedsc-tablistsc-tabsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Vertical + SmartIcons

Vertical + SmartIcons, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--vertical">
                    <div class="sc-tablist">
                      <button class="sc-tab" type="button" aria-selected="true"><i class="sc-icon" data-smart-icon="settings"></i> Geral</button>
                      <button class="sc-tab" type="button" aria-selected="false"><i class="sc-icon" data-smart-icon="bell"></i> Notificações</button>
                      <button class="sc-tab" type="button" aria-selected="false"><i class="sc-icon" data-smart-icon="users"></i> Integrações</button>
                    </div>
                    <div class="sc-tabpanel">Configurações gerais.</div>
                    <div class="sc-tabpanel" hidden="">Preferências de notificação.</div>
                    <div class="sc-tabpanel" hidden="">Integrações e chaves.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--verticalsc-tablistsc-tabsc-iconsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Scroll (muitos tabs)

Scroll (muitos tabs), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--scroll sc-tabs--indicator">
                    <div class="sc-tablist">
                      <button class="sc-tab" type="button" aria-selected="true">Overview</button>
                      <button class="sc-tab" type="button" aria-selected="false">Performance</button>
                      <button class="sc-tab" type="button" aria-selected="false">Usuários</button>
                      <button class="sc-tab" type="button" aria-selected="false">A/B Tests</button>
                      <button class="sc-tab" type="button" aria-selected="false">Erros</button>
                      <button class="sc-tab" type="button" aria-selected="false">Logs</button>
                      <button class="sc-tab" type="button" aria-selected="false">Alertas</button>
                      <button class="sc-tab" type="button" aria-selected="false">Integrações</button>
                      <button class="sc-tab" type="button" aria-selected="false">Webhooks</button>
                    </div>
                    <div class="sc-tabpanel">Tablist com scroll horizontal automático.</div>
                    <div class="sc-tabpanel" hidden="">Performance.</div>
                    <div class="sc-tabpanel" hidden="">Usuários.</div>
                    <div class="sc-tabpanel" hidden="">A/B Tests.</div>
                    <div class="sc-tabpanel" hidden="">Erros.</div>
                    <div class="sc-tabpanel" hidden="">Logs.</div>
                    <div class="sc-tabpanel" hidden="">Alertas.</div>
                    <div class="sc-tabpanel" hidden="">Integrações.</div>
                    <div class="sc-tabpanel" hidden="">Webhooks.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--scrollsc-tabs--indicatorsc-tablistsc-tabsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Tabs dentro de Card

Tabs dentro de Card, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card sc-card-outline sc-card-compact">
                    <div class="sc-tabs sc-tabs--underline sc-tabs--indicator sc-tabs--bare">
                      <div class="sc-tablist">
                        <button class="sc-tab" type="button" aria-selected="true">Resumo</button>
                        <button class="sc-tab" type="button" aria-selected="false">Detalhes</button>
                        <button class="sc-tab" type="button" aria-selected="false">Histórico</button>
                      </div>
                      <div class="sc-tabpanel">Conteúdo no card.</div>
                      <div class="sc-tabpanel" hidden="">Detalhes no card.</div>
                      <div class="sc-tabpanel" hidden="">Histórico no card.</div>
                    </div>
                  </div>
Classes, JavaScript e API
sc-cardsc-card-outlinesc-card-compactsc-tabssc-tabs--underlinesc-tabs--indicatorsc-tabs--baresc-tablistsc-tabsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Tablist + ações (header)

Tablist + ações (header), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--underline sc-tabs--indicator">
                    <div class="sc-tabs-head">
                      <div class="sc-tablist">
                        <button class="sc-tab" type="button" aria-selected="true">Visão</button>
                        <button class="sc-tab" type="button" aria-selected="false">Equipe</button>
                        <button class="sc-tab" type="button" aria-selected="false">Ajustes</button>
                      </div>
                      <div class="sc-tabs-actions">
                        <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Exportar</button>
                        <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Novo</button>
                      </div>
                    </div>
                    <div class="sc-tabpanel">Tabs com ações no header.</div>
                    <div class="sc-tabpanel" hidden="">Equipe.</div>
                    <div class="sc-tabpanel" hidden="">Ajustes.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--underlinesc-tabs--indicatorsc-tabs-headsc-tablistsc-tabsc-tabs-actionssc-btnsc-btn-outlinesc-btn-smsc-btn-primarysc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Header + menu (overflow)

Header + menu (overflow), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-tabs--underline sc-tabs--indicator">
                    <div class="sc-tabs-head">
                      <div class="sc-tablist">
                        <button class="sc-tab" type="button" aria-selected="true">Geral</button>
                        <button class="sc-tab" type="button" aria-selected="false">Cobrança</button>
                        <button class="sc-tab" type="button" aria-selected="false">Segurança</button>
                      </div>
                      <div class="sc-tabs-actions">
                        <div class="sc-menu">
                          <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-menu-trigger="">Mais</button>
                          <div class="sc-menu-popover">
                            <button class="sc-menu-item" type="button">Auditoria</button>
                            <button class="sc-menu-item" type="button">Webhooks</button>
                            <div class="sc-menu-sep"></div>
                            <button class="sc-menu-item" type="button">Suporte</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="sc-tabpanel">Tabs com menu no header.</div>
                    <div class="sc-tabpanel" hidden="">Cobrança.</div>
                    <div class="sc-tabpanel" hidden="">Segurança.</div>
                  </div>
Classes, JavaScript e API
sc-tabssc-tabs--underlinesc-tabs--indicatorsc-tabs-headsc-tablistsc-tabsc-tabs-actionssc-menusc-btnsc-btn-glasssc-btn-smsc-menu-popoversc-menu-itemsc-menu-sepsc-tabpanel

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Workspace switcher

Workspace switcher, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-showcase-tabs"><div role="tablist"><button class="sc-tab is-active" role="tab" aria-selected="true">Visão geral</button><button class="sc-tab" role="tab" aria-selected="false">Atividade</button><button class="sc-tab" role="tab" aria-selected="false">Configuração</button></div><section class="sc-card" role="tabpanel"><strong>Workspace switcher</strong><p>Conteúdo associado à aba selecionada.</p></section></div>
Classes, JavaScript e API
sc-tabssc-showcase-tabssc-tabsc-card

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

WIDE · stable

Analytics views

Analytics views, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-tabs sc-showcase-tabs"><div role="tablist"><button class="sc-tab is-active" role="tab" aria-selected="true">Visão geral</button><button class="sc-tab" role="tab" aria-selected="false">Atividade</button><button class="sc-tab" role="tab" aria-selected="false">Configuração</button></div><section class="sc-card" role="tabpanel"><strong>Analytics views</strong><p>Conteúdo associado à aba selecionada.</p></section></div>
Classes, JavaScript e API
sc-tabssc-showcase-tabssc-tabsc-card

Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tabs
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Navegação →Rodapés →Mega menu →Breadcrumbs →