elementsseparator

Separator

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

Import#

import { Separator } from 'moraine'

Slot Structure#

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

Without content#

root
└── border

With content#

root
├── border
├── container
└── border

Examples#

Sizes#

Border thickness variants.

1
function Sizes() {
2
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
3

4
  return (
5
    <div class="w-xl space-y-4">
6
      <For each={SIZES}>
7
        {(size) => (
8
          <div class="space-y-2">
9
            <p class="text-xs text-muted-foreground tracking-wider uppercase">{size}</p>
10
            <Separator size={size} />
11
          </div>
12
        )}
13
      </For>
14
    </div>
15
  )
16
}

Types#

Solid, dashed, and dotted divider styles.

1
function Types() {
2
  const TYPES = ['solid', 'dashed', 'dotted'] as const
3

4
  return (
5
    <div class="w-xl space-y-4">
6
      <For each={TYPES}>
7
        {(type) => (
8
          <div class="space-y-2">
9
            <p class="text-xs text-muted-foreground tracking-wider uppercase">{type}</p>
10
            <Separator type={type} />
11
          </div>
12
        )}
13
      </For>
14
    </div>
15
  )
16
}

With Content + Vertical#

Inline content and vertical separators in flexible layouts.

1
function WithContentVertical() {
2
  return (
3
    <div class="space-y-6">
4
      <Separator>
5
        <span class="text-xs text-muted-foreground">OR</span>
6
      </Separator>
7

8
      <div class="flex gap-4 h-20 items-center">
9
        <span>Left</span>
10
        <Separator orientation="vertical" />
11
        <span>Center</span>
12
        <Separator orientation="vertical" type="dashed" class="text-primary" />
13
        <span>Right</span>
14
      </div>
15
    </div>
16
  )
17
}

API Reference#

Attributes#

Slotroot4 attributes

Separator line container, including optional label content.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.

ARIA Attributes

ARIA Attribute	Description
aria-hidden	Hides decorative content from assistive technology.
aria-orientation	Communicates horizontal or vertical orientation.
role	Defines the semantic role exposed to assistive technology.

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`	—	—