---
title: Separator
description: Visual divider with configurable orientation, style, and optional label content.
sidebar:
  order: 9
search:
  tags: [divider, horizontal, vertical, rule]
---

# Separator

> Visual divider with configurable orientation, style, and optional label content.

## Import

```tsx
import { Separator } from 'moraine'
```

## Slot Structure

Horizontal or vertical rule with an optional content label in the center.

### Without content

```text
root
└── border
```

### With content

```text
root
├── border
├── container
└── border
```

## Examples

### Sizes

Border thickness variants.

```tsx
function Sizes() {
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const

  return (
    <div class="w-xl space-y-4">
      <For each={SIZES}>
        {(size) => (
          <div class="space-y-2">
            <p class="text-xs text-muted-foreground tracking-wider uppercase">{size}</p>
            <Separator size={size} />
          </div>
        )}
      </For>
    </div>
  )
}
```

### Types

Solid, dashed, and dotted divider styles.

```tsx
function Types() {
  const TYPES = ['solid', 'dashed', 'dotted'] as const

  return (
    <div class="w-xl space-y-4">
      <For each={TYPES}>
        {(type) => (
          <div class="space-y-2">
            <p class="text-xs text-muted-foreground tracking-wider uppercase">{type}</p>
            <Separator type={type} />
          </div>
        )}
      </For>
    </div>
  )
}
```

### With Content + Vertical

Inline content and vertical separators in flexible layouts.

```tsx
function WithContentVertical() {
  return (
    <div class="space-y-6">
      <Separator>
        <span class="text-xs text-muted-foreground">OR</span>
      </Separator>

      <div class="flex gap-4 h-20 items-center">
        <span>Left</span>
        <Separator orientation="vertical" />
        <span>Center</span>
        <Separator orientation="vertical" type="dashed" class="text-primary" />
        <span>Right</span>
      </div>
    </div>
  )
}
```

## API Reference

### Attributes

#### `root`

Separator line container, including optional label content.

##### Data Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| data-orientation | string \| undefined | Stores the rendered orientation. |

##### ARIA Attributes

| Attribute | Type | Description |
| --- | --- | --- |
| aria-hidden | boolean \| string \| undefined | Hides decorative content from assistive technology. |
| aria-orientation | boolean \| string \| undefined | Communicates horizontal or vertical orientation. |
| role | string | Defines the semantic role exposed to assistive technology. |

#### `border`

Visual line segment rendered around optional separator content.

#### `content`

Optional label or custom content rendered within the separator line.

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | JSX.Element | — | Additional content to render inside the separator (usually between two borders). |
| class | ClassValue | — | Class applied to the component root or trigger element. |
| classes | SeparatorT.Classes \| undefined | — | — |
| decorative | boolean \| undefined | false | Whether the separator is decorative (hidden from assistive technologies). |
| orientation | "horizontal" \| "vertical" \| undefined | horizontal | The orientation of the separator. |
| ref | JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined | — | — |
| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined | — | — |
| style | JSX.CSSProperties \| undefined | — | — |
| styles | SeparatorT.Styles \| undefined | — | — |
| type | "solid" \| "dashed" \| "dotted" \| undefined | — | — |

### ARIA

Accessibility attributes and roles emitted by the component markup.

| Attribute | Type | Description |
| --- | --- | --- |
| aria-hidden | boolean \| string \| undefined | Hides decorative content from assistive technology. |
| aria-orientation | boolean \| string \| undefined | Communicates horizontal or vertical orientation. |
| role | string | Defines the semantic role exposed to assistive technology. |

### Data Attributes

State and slot attributes exposed for styling hooks and selectors.

| Attribute | Type | Description |
| --- | --- | --- |
| data-orientation | string \| undefined | Stores the rendered orientation. |
| data-slot | string | Identifies the rendered slot for styling hooks and selectors. |