Visão geral

ButtonGroup une botões removendo as bordas entre eles e criando um bloco contínuo de ações relacionadas.

Horizontal (padrão)

Import

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

Estrutura

Envolva botões Button dentro de ButtonGroup. O componente remove as bordas internas e junta os raios de borda dos extremos.

Orientação vertical

ButtonGroup também funciona em orientação vertical para menus de ações empilhadas.

Orientação vertical

<ButtonGroup orientation="vertical">
  <Button variant="outline">Perfil</Button>
  <Button variant="outline">Configurações</Button>
  <Button variant="outline">Sair</Button>
</ButtonGroup>

Com variantes mistas

Botões de variantes diferentes podem ser combinados dentro do mesmo grupo.

Grupo com variantes mistas

<ButtonGroup>
  <Button>Confirmar</Button>
  <Button variant="outline">Editar</Button>
  <Button variant="ghost">Cancelar</Button>
</ButtonGroup>

Padrão de implementação

Snippets dos usos mais comuns do ButtonGroup no projeto.

Filtro de período

<ButtonGroup>
  <Button variant="outline">Hoje</Button>
  <Button variant="outline">7 dias</Button>
  <Button variant="outline">30 dias</Button>
  <Button variant="outline">Custom</Button>
</ButtonGroup>

Ações de formulário

<ButtonGroup>
  <Button>Salvar</Button>
  <Button variant="outline">Salvar e continuar</Button>
</ButtonGroup>

Controles de zoom

<ButtonGroup>
  <Button size="icon-sm" variant="outline" aria-label="Reduzir">
    <MinusIcon />
  </Button>
  <Button size="icon-sm" variant="outline" aria-label="Ampliar">
    <PlusIcon />
  </Button>
</ButtonGroup>

Props e uso

API do componente customizado ButtonGroup.

Props principais

orientation

"horizontal" | "vertical"

Direção do agrupamento. Padrão: horizontal.

children

ReactNode

Botões Button a serem agrupados. Outros elementos também são aceitos.

className

string

Classes adicionais para o container do grupo.

Acessibilidade

O container usa role="group" para indicar que os botões fazem parte de um conjunto relacionado.

Para grupos de alternância (ex: visualização por dia/semana/mês), considere usar aria-pressed no botão ativo ou o componente ToggleGroup.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter