ButtonGroup

ButtonGroup une múltiplos Button num bloco horizontal ou vertical contínuo — bordas são compartilhadas, cantos internos ficam retos. Ideal para paginação, navegação entre passos e controles segmentados. Para alternância de estado, use ToggleGroup.

import { Button, ButtonGroup } from '@uranus-workspace/design-system';
import { ChevronLeft, ChevronRight } from 'lucide-react';

export default function ButtonGroupDefault() {
  return (
    <ButtonGroup>
      <Button variant="outline">
        <ChevronLeft />
        Anterior
      </Button>
      <Button variant="outline">Página 2 de 10</Button>
      <Button variant="outline">
        Próxima
        <ChevronRight />
      </Button>
    </ButtonGroup>
  );
}

Anatomia

• ButtonGroup — container role="group" que aplica o tratamento de bordas compartilhadas. Aceita orientation="horizontal" (padrão) ou "vertical".
• ButtonGroupText — bloco de texto que se comporta como "botão desabilitado" dentro do grupo (rótulo, contador). Aceita asChild para usar com spans, links etc.
• ButtonGroupSeparator — separador vertical (ou horizontal, em grupos verticais) entre itens.

Uso

import { Button, ButtonGroup } from '@uranus-workspace/design-system';
import { ChevronLeft, ChevronRight } from 'lucide-react';

<ButtonGroup>
  <Button variant="outline">
    <ChevronLeft />
    Anterior
  </Button>
  <Button variant="outline">
    Próxima
    <ChevronRight />
  </Button>
</ButtonGroup>

Grupos verticais seguem o mesmo padrão:

<ButtonGroup orientation="vertical">
  <Button variant="outline">Editar</Button>
  <Button variant="outline">Duplicar</Button>
  <Button variant="outline">Arquivar</Button>
</ButtonGroup>

Faça

• Use a mesma variant para todos os botões do grupo — outline é a escolha mais comum.
• Mantenha os rótulos curtos para não quebrar a grid.
• Para grupos semanticamente "um único controle" (como alinhamento), prefira ToggleGroup.

Não faça

• Não misture variant="primary" com variant="outline" no mesmo grupo — a ênfase fica inconsistente.
• Não coloque botões não relacionados num grupo. A proximidade visual implica relação funcional.
• Não use ButtonGroup como barra de ferramentas complexa — use Toolbar quando houver.

Acessibilidade

• O container emite role="group". Dê um aria-label descritivo quando o grupo não estiver ligado a um label visível.
• Cada botão mantém seu próprio nome acessível, estado de foco e atalho de teclado.
• Em grupos verticais, a ordem do DOM deve espelhar a ordem visual para leitores de tela.