Tabs

Navegação por abas. Horizontal (container pill) e vertical (sidebar com divisores, títulos e rolagem). Cores invertidas entre modos para contraste. Dark mode automático via tokens semânticos.

components/tabs.cssAbrir no Figma

Variantes

Clique nas abas para alternar. Horizontal com estado desativado. Vertical com divisor e com título de categoria.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar as tabs.

Propriedade	Tipo	Default	Descrição
.tabs-horizontal	classe	—	Container horizontal (44px, radius 6px, padding 8px).
.tab-h	classe	—	Tab horizontal (28px, flex fill).
.tabs-vertical	classe	—	Container vertical (borda direita, padding esquerdo 72px).
.tab-v	classe	—	Tab vertical (padding 8px 12px, radius 6px).
.tab-v-label	classe	—	Texto da tab vertical (trunca com reticências).
.tab-v-chevron	classe	—	Chevron right (12x12, visível em ativa/hover).
.tabs-divider	classe	—	Divisor horizontal entre grupos de tabs.
.tabs-category	classe	—	Container de categoria com título.
.tabs-category-title	classe	—	Título de categoria (p5 regular, subtle).
.is-active	classe	—	Tab selecionada.
.is-disabled	classe	—	Tab desativada.

Código

Snippets prontos para copiar e usar.

Horizontal

<div class="tabs-horizontal">
    <button class="tab-h is-active">Aba 01</button>
    <button class="tab-h">Aba 02</button>
    <button class="tab-h">Aba 03</button>
</div>

Vertical padrão

<div class="tabs-vertical">
    <button class="tab-v is-active">
        <span class="tab-v-label">Aba A</span>
        <span class="tab-v-chevron"><!-- SVG chevron right 12x12 --></span>
    </button>
    <button class="tab-v">
        <span class="tab-v-label">Aba B</span>
        <span class="tab-v-chevron"><!-- SVG --></span>
    </button>
</div>

Com divisor

<div class="tabs-vertical">
    <button class="tab-v is-active">...</button>
    <button class="tab-v">...</button>
    <div class="tabs-divider"></div>
    <button class="tab-v">...</button>
</div>

Com título de categoria

<div class="tabs-vertical">
    <div class="tabs-category">
        <span class="tabs-category-title">Categoria A</span>
        <button class="tab-v is-active">...</button>
        <button class="tab-v">...</button>
    </div>
    <div class="tabs-category">
        <span class="tabs-category-title">Categoria B</span>
        <button class="tab-v">...</button>
    </div>
</div>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
--surface-base-neutral-container-deep	Background container / inativa
--surface-base-neutral-container-default	Ativa (light) / Hover (dark)
--surface-base-neutral-container-emphasis	Hover (light) / Ativa (dark)
--text-base-neutral-default	Texto ativo e hover
--text-base-neutral-secondary	Texto inativo
--text-base-neutral-subtle	Texto desativado / título categoria
--border-base-neutral-default	Borda direita vertical / divisor
--radius-default	Border-radius (6px)
--spacing-2	Padding container / gap tabs (8px)

Versão3.0.0

Última atualização2026-03-20

Caminhocomponentes/tabs.md