Skip to content
WeDanceDocs
Componentsbeta

Separator

A hairline that divides content. Use it when spacing alone doesn’t make the break clear.

Demo

Festival

Salsa Weekender Munich

Dates
Fri 22 – Sun 24 May
Pass
€149
vue
<p>Salsa Weekender Munich</p>
<Separator class="my-4" />
<p>Fri 22 – Sun 24 May</p>

Vertical

Between inline items in a row. The row needs a fixed height for the line to show.

Salsa
Bachata
Kizomba
vue
<div class="flex h-5 items-center gap-3 text-sm">
  <span>Salsa</span>
  <Separator orientation="vertical" />
  <span>Bachata</span>
  <Separator orientation="vertical" />
  <span>Kizomba</span>
</div>

Semantic break

Only when the break means something and there is no heading to say so.

Your ticket for the Saturday party is confirmed.

Other events this weekend you might like.

vue
<!-- Marks a real thematic break: screen readers announce it -->
<Separator :decorative="false" />

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Horizontal is a 1px full-width line; vertical is 1px wide and full height — the parent needs a height (e.g. h-5 on a flex row).
decorativebooleantrueWhen true, role="none" — hidden from assistive tech. Set false for a meaningful break: role="separator" plus aria-orientation.
classHTMLAttributes["class"]—Merged with cn(). Use for spacing (my-4, mx-2). Colour comes from bg-border — don’t override it.
as / asChildstring | Component / boolean'div'From reka-ui Primitive. Rarely needed.

Do & don't

Rumba workshop

Sat 13:00 · Studio 2

€25

Do — Separate groups — event details from the price block. Let spacing do the rest.

Rumba workshop

Saturday

13:00

Studio 2

€25

Don't — A line between every list row. On a phone it turns a schedule into a ruled notebook.

Accessibility

  • Default is decorative: the line is role="none" and screen readers skip it. That’s right for almost every case — the visual gap is the only thing it adds.
  • If the line marks a real change of topic that isn’t already a heading, pass :decorative="false" so it becomes role="separator".
  • The line uses --border (brown at 13%). It’s intentionally low-contrast — never rely on a separator alone to show that two pieces of content are different; use spacing or a heading too.