Separator

SSeparator is a visual divider between blocks of content or groups of elements. It is built on Reka UI: by default it carries the separator role (aria-orientation), and in decorative mode it is hidden from screen readers.

Horizontal

Block above

Block below

<template>
  <SSeparator />
</template>

Vertical

Stretches to the height of the container — handy between inline elements.

Profile

Settings

Sign out

<template>
  <div style="display: flex; align-items: center; gap: 12px; height: 24px">
    <span>Profile</span>
    <SSeparator orientation="vertical" />
    <span>Settings</span>
  </div>
</template>

With a label

Centered text (the label prop or the default slot) — for example, to separate sign-in options.

or

<template>
  <SSeparator label="or" />

  <!-- or via the slot -->
  <SSeparator>or</SSeparator>
</template>

API

Props

Name	Type	Default	Description
orientation	"vertical" | "horizontal"	"horizontal"	Line orientation: horizontal spans the full width, vertical the full height of the container.
decorative	boolean	false	When true, the separator is purely decorative and hidden from screen readers (role="none").
label	string	undefined	Label text in the center of a horizontal separator (alternative to the default slot).

Slots

Name	Description
default	Label content in the center of a horizontal separator.