Tab

O componente Tab nos permite separar conteúdos de mesma hierarquia em guias diferentes.

Quando usar?

Para organizar o conteúdo da página;
As tabs podem ser usadas em layouts de página inteira ou em componentes como modais, cartões ou painéis laterais.

alt text

alt text

Possui os principais estados:

Default ou enabled: quando está ativo, mas um usuário não está interagindo diretamente com ele;
Selected: quando um usuário ativa/clica no botão;
Focus: quando um usuário clica ou utilizar o teclado (TAB) no botão, ela se torna focada, indicando que o usuário navegou com sucesso para o componente;
Hover: quando o usuário passa o mouse sobre o componente, mostrando que é possível interagir com o elemento;
Disabled: quando o usuário não tem permissão para interagir com o componente.

Quando você escolhe uma aba, o conteúdo relacionado é exibido, enquanto os conteúdos das outras ficam ocultos;
A aba selecionada é destacada visualmente, por exemplo, alterando a cor de fundo ou adicionando uma borda;
As abas devem ser organizadas de maneira lógica e intuitiva;
Podem ser usadas ao nível de página ou em componentes menores, como widgets. Tanto para telas pequenas quanto grandes, as abas têm uma largura mínima de 48px, seguindo diretrizes de acessibilidade;
No mobile, as abas se diferenciam apenas pelos ícones devido ao espaço limitado.

Geralmente, há um botão de fechamento em abas que permite ao usuário fechá-las. Isso acontece quando o usuário clica no botão de fechamento, removendo a aba da visualização;
É comum ter um feedback visual para indicar o sucesso da ação;
Após fechar uma aba removível, a prática padrão é selecionar automaticamente a próxima aba ativa, se houver;
Em algumas implementações, especialmente quando fechar uma aba pode resultar na perda de dados, pode haver uma confirmação ou uma opção para evitar o fechamento acidental.