# Toolbar

Barra de ferramentas: os controles ficam numa parada de tabulacao só, e as
setas andam entre eles.

E isso que a diferencia de uma `div` com botões: **dez botões soltos sao dez
paradas de Tab** entre o campo anterior e o proximo. Numa barra, e uma.

```tsx
<Toolbar>
  <ToolbarButton render={<Toggle />}>Negrito</ToolbarButton>
  <ToolbarButton render={<Toggle />}>Italico</ToolbarButton>
  <ToolbarSeparator />
  <ToolbarButton render={<Button variant="ghost" />}>Limpar formato</ToolbarButton>
</Toolbar>
```

Use `ToolbarButton` com `render` para vestir `Button`, `Toggle` ou `Select` sem
perder essa navegação.

## As partes

`ToolbarGroup` junta botões que fazem parte do mesmo assunto (alinhar à
esquerda, ao centro, à direita), e o `ToolbarSeparator` separa um grupo do
outro. Para o leitor de tela, o grupo é o que diz que as três opções são uma
escolha só.

## No React Native

Não porta, por decisão - superfície de edição de mesa: uma parada de tabulação e navegação por seta, que o toque não tem. Não é fila: não vai existir. A [tabela de paridade](/react-native) diz o porquê de cada uma.

## Importação

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

## Exemplos

### Formatação

```tsx
import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from '@rivocode/ui'

export function Formatting() {
  return (
    <Toolbar aria-label="Formatação">
      <ToolbarGroup>
        <ToolbarButton>Negrito</ToolbarButton>
        <ToolbarButton>Itálico</ToolbarButton>
        <ToolbarButton>Sublinhado</ToolbarButton>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarButton>Limpar formato</ToolbarButton>
    </Toolbar>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `disabled` | `boolean` |  | 0.4.0 |  |
| `loopFocus` | `boolean` |  | 0.4.0 | If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached. |
| `orientation` | `Orientation` |  | 0.4.0 | The orientation of the toolbar. |
| `render` | `ComponentRenderFn<HTMLProps, ToolbarRootState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

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

## Ver também

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