Intro
O Segment Button é um componente de seleção que permite alternar entre múltiplas opções relacionadas dentro de um mesmo grupo horizontal.
Ele representa uma troca de contexto imediato, mantendo todas as opções visíveis simultaneamente.
É classificado como:
- Componente de Seleção Exclusiva
- Alternador de visualização ou categoria
- Controle de filtro primário
Diferente do Dropdown, o Segment Button expõe todas as opções, reduzindo fricção cognitiva.
Anatomia Visual
Estrutura Base
- Container do Grupo
- Área que envolve todos os segmentos
- Pode possuir borda externa e radius
- Segmento (Item)
- Unidade clicável individual
- Representa uma opção
- Estado Ativo
- Segmento selecionado
- Visualmente destacado
- Divisores Internos
- Separação visual entre segmentos
Anatomia Estrutural
1 — Container
2 — Segmento
2.1 — Label
3 — Estado Selecionado
4 — Divisor
Estados
Para cada segmento:
- Default
- Hover
- Focus
- Active (pressionado)
- Selected
- Disabled
Características
Comportamento
- Apenas uma opção selecionada por vez (modo exclusivo)
- Mudança imediata de conteúdo
- Não abre overlay
- Não exige confirmação
Alternativas Comportamentais
O Segment Button pode operar como:
- Alternador de visualização
- Ex: Lista | Grid
- Alternador de categoria
- Ex: Legislação | Lei Ordinária | Lei Complementar
- Filtro rápido
- Ex: Ativos | Inativos | Todos
Responsividade
Desktop:
- Layout horizontal
- Distribuição proporcional
Mobile:
- Pode:
- Permitir scroll horizontal
- Quebrar em múltiplas linhas (evitar quando possível)
- Converter para Dropdown quando muitas opções
Quando Usar
- Alternar entre tipos de conteúdo
- Filtrar categorias fixas
- Mudar visualização
- Agrupar seções mutuamente exclusivas
Quando NÃO Usar
- Para mais de 5 opções
- Quando as opções são longas
- Quando a lista é dinâmica
- Para múltipla seleção (usar Checkbox ou Multi-select)
Boas Práticas
✅ Faça
- Use rótulos curtos
- Mantenha todas as opções visíveis
- Destaque claramente o estado ativo
- Garanta contraste adequado
- Use para trocas rápidas e previsíveis
❌ Não Faça
- Não use como substituto de Tabs estruturais
- Não utilize para ações destrutivas
- Não misture ícones e textos sem padrão
- Não permita múltiplos ativos no modo exclusivo
Comparação com Componentes Relacionados
| Componente | Diferença |
|---|---|
| Tabs | Tabs geralmente alteram grandes seções estruturais |
| Dropdown | Dropdown esconde opções |
| Radio | Radio é usado dentro de formulários |
| Button Group | Button Group pode executar ações distintas |
Erros Comuns
- Usar para navegação profunda
- Permitir múltiplos selecionados sem intenção
- Aplicar em contextos com muitas opções
- Não indicar claramente o estado ativo
Resumo
O Segment Button é ideal para:
- Alternância rápida
- Filtros visíveis
- Mudança de categoria
- Controle simples e direto
Ele melhora:
- Escaneabilidade
- Previsibilidade
- Velocidade de decisão
Deve ser usado quando as opções são limitadas, mutuamente exclusivas e precisam estar sempre visíveis.