Separator

VdSeparator is a semantic divider with role="separator". Use it to break up stacked content, label a transition (e.g. "OR"), or split inline actions vertically. Pure CSS — no JavaScript.

Horizontal

Account settings

Billing

Danger zone

<hr class="vd-separator" />

Labeled

<div class="vd-separator vd-separator-labeled" role="separator" aria-orientation="horizontal">
  <span class="vd-separator-label">OR</span>
</div>

Vertical (Inline)

Edit

Duplicate

Delete

<div style="display: flex; align-items: center; gap: 1rem;">
  <span>Edit</span>
  <hr class="vd-separator vd-separator-vertical" aria-orientation="vertical" />
  <span>Duplicate</span>
  <hr class="vd-separator vd-separator-vertical" aria-orientation="vertical" />
  <span>Delete</span>
</div>

API Reference

Usage

<script setup lang="ts">
import { VdSeparator } from "@vanduo-oss/vd3";
</script>

<template>
  <VdSeparator />
  <VdSeparator label="OR" />
  <VdSeparator vertical />
</template>

CSS Classes

Class	Description
`.vd-separator`	Base divider — a hairline rule using the border token
`.vd-separator-vertical`	Vertical orientation for use inside a flex row (give the row a height)
`.vd-separator-labeled`	Horizontal divider with a centred label and a rule on each side
`.vd-separator-label`	The text element inside a labeled separator

Component API

Prop	Description
`:label`	Optional centred text; renders the labeled variant (horizontal only).
`:vertical`	Renders a vertical divider for use inside a flex row (ignores label).

Accessibility

The plain and vertical variants render a native <hr>, which already exposes role="separator"; the vertical one adds aria-orientation="vertical".
The labeled variant uses a <div> with an explicit role="separator" so the "OR" text is announced.
Separators are decorative dividers — keep meaningful structure in headings and landmarks rather than relying on the rule alone.