Primitivelayout

Button Group

Stable

Junta 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-group

Preview

Default

With Separator

With Text

npx

With Field

Vertical

All states

Default

With Separator

With Text

npx

With Field

Vertical

Usage

Imports de Button Group

import { Button } from '@/components/ui/button'
import { ButtonGroup } from '@/components/ui/button-group'

Button Group

1
2
3
4
5<ButtonGroup>
  <Button variant="outline">Instalar</Button>
  <Button variant="outline">Comparar</Button>
  <Button variant="outline">Metadata</Button>
</ButtonGroup>

Props

ButtonGroup

Props de ButtonGroup
Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical" \| null`	`'horizontal'`

Estende React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>. Aceita também os atributos padrão de um elemento React (280 não listados).

ButtonGroupText

Props de ButtonGroupText
Prop	Type	Default	Description
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Estende useRender.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

ButtonGroupSeparator

Props de ButtonGroupSeparator
Prop	Type	Default	Description
decorative	`boolean`	sem valor padrão
className	`string \| ((state: SeparatorState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
orientation	`Orientation`	`'vertical'`	The orientation of the separator.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SeparatorState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: SeparatorState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof Separator>. Aceita também os atributos padrão de um elemento React (275 não listados).

Metadata

Notas de acessibilidade

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.

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
URL: https://ui.shadcn.com/r/styles/base-vega/button-group.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: @base-ui/react, class-variance-authority
Ícones: Nenhum
Construído sobre: Button Separator
Usado por: Nenhum ainda