# Separator

Linha que separa, com `role="separator"`.

Use quando ela divide assunto, e não só enfeita: o leitor de tela precisa saber
que ali termina um bloco. Para risco puramente decorativo, uma borda no próprio
elemento sai mais barata.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Separator` - só a linha horizontal. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

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

## Exemplos

### Horizontal

```tsx
import { Separator } from '@rivocode/ui'
import { currencyShort } from '@rivocode/ui/chart'

export function Horizontal() {
  return (
    <div className="w-80">
      <p className="pb-3 text-base text-fg">Dados da nota</p>
      <Separator />
      <p className="pt-3 text-base text-fg-muted">Emitida em 05/08, vence em 20/08.</p>
    </div>
  )
}
```

### Vertical

```tsx
import { Separator } from '@rivocode/ui'
import { currencyShort } from '@rivocode/ui/chart'

export function Vertical() {
  return (
    <div className="flex h-6 items-center gap-3 text-sm text-fg-muted">
      <span>4813</span>
      <Separator orientation="vertical" />
      <span>Clínica São Lucas</span>
      <Separator orientation="vertical" />
      <span>{currencyShort(2_480)}</span>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `orientation` | `Orientation` |  | 0.4.0 | The orientation of the separator. |
| `render` | `ComponentRenderFn<HTMLProps, SeparatorState> \| 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

- [Accordion](/componentes/accordion.md)
- [AspectRatio](/componentes/aspect-ratio.md)
- [Avatar](/componentes/avatar.md)
- [Card](/componentes/card.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)