# ButtonGroup

Botões que agem sobre a mesma coisa, encostados um no outro.

Serve para ações irmãs: "emitir" com o menu de variantes colado do lado, ou a
troca de visualização entre lista, linhas e grade.

O encaixe é feito por seletor de irmãos, e não pedindo `className` em cada
filho. Qualquer `Button`, link ou gatilho de menu entra no lugar certo sem saber
que está num grupo. As bordas internas viram uma só, senão a divisão entre dois
botões secundários sai com o dobro da espessura das externas.

`orientation="vertical"` empilha, para barra lateral estreita.

## Quando não usar

Não é grupo de escolha. Se o que você quer é marcar uma opção entre várias, o
`ToggleGroup` guarda estado e diz isso no aria; aqui são ações, e cada clique
faz uma coisa diferente.

Botões sem relação entre si também não entram: encostados, eles prometem uma
família que não existe. Para esses, `gap` normal.

## No React Native

Não porta, por decisão - `Tabs` e `ToggleGroup` cobrem o caso; botão encostado em botão vira um alvo só no dedo. Não é fila: não vai existir. A [tabela de paridade](/react-native) diz o porquê de cada uma.

## Importação

```tsx
import { ButtonGroup } from '@rivocode/ui'
```

## Exemplos

### Ação com variantes

```tsx
import { Button, ButtonGroup, Menu, MenuContent, MenuItem, MenuTrigger } from '@rivocode/ui'
import { ChevronDown, Grid2x2, List, Rows3 } from 'lucide-react'

export function SplitAction() {
  return (
    <ButtonGroup>
      <Button>Emitir nota</Button>
      <Menu>
        <MenuTrigger
          render={<Button variant="primary" size="icon" aria-label="Outras formas de emitir" />}
        >
          <ChevronDown size={16} />
        </MenuTrigger>
        <MenuContent>
          <MenuItem>Emitir e enviar por e-mail</MenuItem>
          <MenuItem>Emitir e baixar o PDF</MenuItem>
          <MenuItem>Emitir em lote</MenuItem>
        </MenuContent>
      </Menu>
    </ButtonGroup>
  )
}
```

### Só ícones

```tsx
import { Button, ButtonGroup, Menu, MenuContent, MenuItem, MenuTrigger } from '@rivocode/ui'
import { ChevronDown, Grid2x2, List, Rows3 } from 'lucide-react'

export function IconsOnly() {
  return (
    <ButtonGroup>
      <Button variant="secondary" size="icon" aria-label="Ver em lista">
        <List size={16} />
      </Button>
      <Button variant="secondary" size="icon" aria-label="Ver em linhas">
        <Rows3 size={16} />
      </Button>
      <Button variant="secondary" size="icon" aria-label="Ver em grade">
        <Grid2x2 size={16} />
      </Button>
    </ButtonGroup>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` |  | 0.4.0 |  |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Button](/componentes/button.md)
- [Clipboard](/componentes/clipboard.md)
- [Toggle](/componentes/toggle.md)
- [ToggleGroup](/componentes/toggle-group.md)
- [Toolbar](/componentes/toolbar.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)