@usevyre/react @usevyre/vue

Separator

A thin visual divider rendered as an accessible <hr>. Works horizontally and vertically inside flex containers.

Horizontal & vertical

Above the separator

Below the separator

Left

Right

import { Separator } from "@usevyre/react";

// Horizontal (default)
<p>Above</p>
<Separator />
<p>Below</p>

// Vertical — wrap in a flex row
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
  <span>Left</span>
  <Separator orientation="vertical" style={{ height: 20 }} />
  <span>Right</span>
</div>

<script setup>
import { Separator } from "@usevyre/vue";
</script>
<template>
  <p>Above</p>
  <Separator />
  <p>Below</p>

  <div style="display:flex;gap:12px;align-items:center">
    <span>Left</span>
    <Separator orientation="vertical" style="height:20px" />
    <span>Right</span>
  </div>
</template>

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the separator line.
`decorative`	`boolean`	`false`	Hides from assistive technology (role=none).
`class`	`string`	`—`	Additional CSS class.

AI Context

Prop	Values	Default
`orientation`	`"horizontal"`\|`"vertical"`	`horizontal`

← Select Sheet →