Vox Mente
Navegação

Componentes

Button Group

beta

Agrupa ações relacionadas numa peça só. São botões, não estado — para estado existe Toggle Group.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/button-group

Playground
<ButtonGroup>
  <Button size="icon-md" aria-label="Copiar"><Copy /></Button>
  <Button size="icon-md" aria-label="Exportar"><Export /></Button>
  <Button size="icon-md" aria-label="Buscar"><MagnifyingGlass /></Button>
</ButtonGroup>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
ButtonGroup
  └─ ButtonGroupSeparator

Uso

Agrupa ações relacionadas visualmente. São botões de verdade, não um estado — nada aqui fica pressionado.

Raio da borda

O agrupamento arredonda só as pontas e junta as bordas do meio — o Button reconhece que está dentro de um ButtonGroup e ajusta o próprio raio sozinho.

Vertical

`orientation="vertical"` empilha os botões e move o arredondamento compartilhado para o topo e a base.

Separador

`ButtonGroupSeparator` marca uma quebra de sentido dentro do grupo — por exemplo, entre uma ação e um menu de mais opções.

Com texto

`ButtonGroupText` encaixa um rótulo estático no grupo, sem virar botão — útil para nomear o que o grupo faz.
Ordenar por

Grupos aninhados

Um `ButtonGroup` dentro de outro ganha espaço próprio em vez de colar nas bordas — use para separar dois blocos de ação sem um separador vertical.

Botão dividido

Uma ação principal ao lado de um gatilho de menu — os dois colados como um botão só. O clique no corpo executa direto; a seta abre as variações da mesma ação.

Com outros controles

O grupo não é só para botões: reconhece um campo de texto, um Select ou o gatilho de um menu como parte da mesma peça, e ajusta o raio da borda em volta de qualquer um deles.

ButtonGroup não é ToggleGroup

ButtonGroup agrupa botões de verdade: cada um dispara uma ação independente, e nenhum fica pressionado. Para opções mutuamente exclusivas que ficam marcadas — visualização em lista ou em cartões — use ToggleGroup, que guarda estado.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

ButtonGroup

PropTipoPadrão
orientation"horizontal" | "vertical" | null—

Também aceita as props de React, incluindo className e os atributos de DOM.

ButtonGroupSeparator, ButtonGroupText não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css