# Separator

Draws a thin line that divides content, horizontally or vertically.

- **Import:** `import { Separator } from "@booleanpress/ui/separator"`
- **Radix Separator:** <https://www.radix-ui.com/primitives/docs/components/separator>
- **Page:** <https://ui.booleanpress.com/components/separator> · @booleanpress/ui 0.1.0

## Usage

```tsx
import { Separator } from "@booleanpress/ui/separator"

export function Divided() {
  return (
    <div>
      <p>Delivery settings</p>
      <Separator className="my-4" />
      <p>Retention</p>
    </div>
  )
}
```

By default it is decorative: it is hidden from assistive technology, because most lines only decorate. Set `decorative={false}` when the line marks a real boundary between two sections that a screen-reader user should know about. A horizontal separator fills the width of its parent; a vertical one fills its height, so give the parent a height (`h-5`, or a flex row). It does not move or resize: it is not a window splitter.

## Examples

### Horizontal

A line between a heading and the text below it.

```tsx
import { Separator } from "@booleanpress/ui/separator"

export default function SeparatorHorizontal() {
  return (
    <div className="w-full max-w-xs">
      <h4 className="text-sm font-medium">Delivery settings</h4>
      <p className="text-sm text-muted-foreground">Choose how failed emails are retried.</p>
      <Separator className="my-4" />
      <p className="text-sm">Retry up to 3 times, 10 minutes apart.</p>
    </div>
  )
}
```

### Vertical

Lines between inline items; the parent row sets the height.

```tsx
import { Separator } from "@booleanpress/ui/separator"

export default function SeparatorVertical() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm">
      <span>Logs</span>
      <Separator orientation="vertical" />
      <span>Routing</span>
      <Separator orientation="vertical" />
      <span>Notifications</span>
    </div>
  )
}
```

### Semantic

`decorative={false}` exposes the line to assistive technology as a separator.

```tsx
import { Separator } from "@booleanpress/ui/separator"

export default function SeparatorSemantic() {
  return (
    <div className="w-full max-w-xs text-sm">
      <p>Failed emails</p>
      <Separator decorative={false} className="my-3" />
      <p>Delivered emails</p>
    </div>
  )
}
```

## Accessibility

**Semantics.** A decorative separator renders `role="none"`. With `decorative={false}` it renders `role="separator"`, and a vertical one adds `aria-orientation="vertical"` (horizontal is the default of the role).

**Labels.** A separator needs no name.

**Focus.** It is not focusable, and the arrow keys do nothing: it is not an interactive splitter.

**Known limits.**

- The line is 1 px of `--border`. It is a visual cue only; never rely on it alone to show that two pieces of content are separate.

### Keyboard

| Key | Behaviour |
| --- | --- |

## API

### Separator

Renders Radix Separator.Root and passes it every other prop.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` |  | Render the child element instead, with this part's behaviour and classes merged onto it. |
| `decorative` | `boolean` |  | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
| `orientation` | `"horizontal" \| "vertical"` | `vertical` | Either `vertical` or `horizontal`. Defaults to `horizontal`. |

Every part takes `className`, merged with its defaults by `cn()`, and `ref`, which reaches the element it renders.

**Data attributes:** `data-slot="separator"` (Separator).

## Theming

| Token | Used for |
| --- | --- |
| `--border` | background |