# Separator

> Una línea de 1px, horizontal o vertical, que agrupa sin decir nada.

```tsx
import { Separator } from "sebs7n-ui/separator"
```

## Ejemplos

### Horizontal y vertical

```tsx
import { Separator } from "sebs7n-ui/separator"

function Basico() {
  return (
    <div className="w-full max-w-sm">
      <div className="text-copy-14 text-gray-1000">Facturación</div>
      <Separator className="my-3" />
      <div className="flex h-5 items-center gap-3 text-copy-13 text-gray-900">
        <span>Plan Pro</span>
        <Separator orientation="vertical" />
        <span>Mensual</span>
        <Separator orientation="vertical" />
        <span>ARS</span>
      </div>
    </div>
  )
}
```

## Props

### Separator

Hereda las props de `Separator`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | The orientation of the separator. |
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo. |

## Accesibilidad

- Por defecto Base UI lo emite con `role="separator"` y su orientación.
- Si solo separa visualmente y ya hay una estructura semántica alrededor (`<ul>`, `<section>`), conviene `aria-hidden`.

## Reglas de uso

- Vertical dentro de un `flex` necesita alto: `className="h-4"`.
- Entre ítems de un menú va `DropdownMenuSeparator`, no este.

## Relacionados

[dropdown-menu](/docs/components/dropdown-menu.md) · [card](/docs/components/card.md)