Pular para o conteúdo
Faculdade PhorteDesign System

Abas

Em andamento

Abas no padrão da WAI-ARIA, inteiro: tablist com nome, uma parada de Tab (a aba aberta), setas para trocar, Home e End, e cada painel ligado à sua aba. Ativação automática ou manual.

Função
Navegação e estrutura
Também chamado de
abas, guias, tabs, separadores
Mora em
app/components/molecules/Abas.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Com aba desabilitada
  3. Com aba em breve
  4. Ativação manual

Quando usar

Para alternar entre partes de um mesmo assunto sem sair da página — "Sobre o curso", "Grade", "Corpo docente", "Investimento".

Faça

  • Dê um rotulo ao conjunto: "Informações do curso".
  • Use de duas a seis abas, com rótulos curtos.
  • Use ativacao="manual" quando o painel custar a carregar: a seta só move o foco, e o Enter abre.

Evite

  • Esconder numa aba o que quase todos precisam ver.
  • Escrever "(em breve)" no rótulo: use emBreve, que põe a etiqueta e a diz a quem ouve (E122).
  • Aba desabilitada sem motivo à vista: se ela volta, é emBreve; se não, tire a aba.
  • Abas dentro de abas.

Quando não usar. Para filtrar uma lista, use o FilterGroup. Para navegar entre páginas, links. Para conteúdo que a pessoa lê em sequência, o Accordion ou a própria página.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Lista — `role="tablist"` com o `rotulo`, linha `--border` embaixo; rola na horizontal no celular.
  2. Aba — `role="tab"`, 44px de altura, negrito 16px; a aberta em `--primary` com a barra de 4px embaixo.
  3. Painel — `role="tabpanel"` ligado à aba, na ordem de Tab.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Abertaaria-selected="true", vermelha, com a barra embaixo — estado por cor e forma.
Fechada--muted-foreground; no hover, --ink. Fora do Tab (tabIndex={-1}).
DesabilitadaA 50%, cursor proibido, pulada pelas setas, aria-disabled; não abre, e o painel dela não existe na página — a informação não aparece (E122, testado na ficha).
Em breveComo a desabilitada, mais a etiqueta "Em breve" ao lado do rótulo, dita a quem ouve ("Investimento, Em breve") — E122, testado na ficha.
FocoAnel por dentro da aba (ring-inset), para a barra que rola não cortá-lo.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique numa abaAbre o painel dela e chama onTrocar.
Seta com ativação automáticaMove o foco e abre a aba — conferido no teste da ficha.
Seta com ativação manualSó move o foco; Enter ou Espaço abrem — conferido no teste da ficha.
Modo controladoCom aba, quem manda é o consumidor; onTrocar recebe o id.

Relacionados