Button Group
StableJunta controles numa forma só: achata os cantos internos, colapsa as bordas dobradas e eleva quem está com foco acima dos vizinhos para o anel não ser cortado. É só desenho — não adiciona foco itinerante, papel nem estado compartilhado, e cada controle dentro mantém o próprio Tab stop. Juntar é uma afirmação de que aquilo age sobre o mesmo objeto; um conjunto em que só um pode estar ativo é Toggle ou RadioGroup, não isto.
Instalação
npx up-web-ds add button-groupPreview
Default
With Separator
With Text
With Field
Vertical
All states
Default
With Separator
With Text
With Field
Vertical
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- layout
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / button-group
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: o grupo não introduz foco itinerante, então três botões continuam sendo três Tab stops e nada sobre tabular mudou por eles terem sido unidos; um prefixo de texto não entra na sequência, porque um rótulo focalizável seria um botão que não faz nada. Leitor de tela verificado por teste: o grupo não declara papel algum — a forma é uma afirmação visual de que os controles agem sobre o mesmo objeto, e chamá-la de group, toolbar ou conjunto de rádio seria mentira — e cada controle continua anunciado nos próprios termos, inclusive um campo de texto que não vira botão ao entrar na forma. Touch verificado em navegador com emulação de toque em viewport de 375px: os alvos vêm dos controles compostos e medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 nos dois eixos, e o anel de foco fica acima dos vizinhos em vez de ser recortado pela borda seguinte. Reduced motion verificado com prefers-reduced-motion: reduce — as transições são as herdadas do Button e colapsam para 1ms.
Dependências
- Pacotes
- @base-ui/react, class-variance-authority
- Ícones
- Nenhum
- Usado por
- Nenhum ainda