Separator

Native <hr> is already styled. Add .re-separator for a consistent class and a vertical divider for toolbars via data-orientation="vertical" (pair it with role="separator" and aria-orientation="vertical").

Orientations

Horizontal:

---

Vertical, between inline items:

Edit

Duplicate

Delete

Live example

<p>Horizontal:</p>
<hr class="re-separator" />
<p>Vertical, between inline items:</p>
<div style="display: flex; align-items: center; gap: var(--re-space-3)">
  <span>Edit</span>
  <div
    class="re-separator"
    role="separator"
    aria-orientation="vertical"
    data-orientation="vertical"
  ></div>
  <span>Duplicate</span>
  <div
    class="re-separator"
    role="separator"
    aria-orientation="vertical"
    data-orientation="vertical"
  ></div>
  <span>Delete</span>
</div>

Labeled

A horizontal rule with text in the middle (“OR”). The two lines are pseudo-elements carrying a real border (so they survive forced colors); position the label with data-align (center default, start, end).

OR

Continue with

Live example

<div class="re-separator" data-label role="separator" aria-orientation="horizontal">
  <span class="re-separator__label">OR</span>
</div>
<div
  class="re-separator"
  data-label
  data-align="start"
  role="separator"
  aria-orientation="horizontal"
>
  <span class="re-separator__label">Continue with</span>
</div>

Accessibility

A separator is decorative structure, not an interactive control — it takes no focus and has no keyboard interaction.

• Semantics — the horizontal rule is a native <hr>, which carries an implicit role="separator", so assistive tech announces the boundary with no extra markup. The vertical divider is a non-semantic <div>, so it declares role="separator" and aria-orientation="vertical" explicitly to expose the same boundary. (<hr>’s default orientation is horizontal, so no aria-orientation is needed there.)
• Labeled — the label’s meaning rides the rendered __label text node, not the separator’s accessible name (which screen readers expose inconsistently), so the element declares an explicit aria-orientation="horizontal".
• Notes — the divider is drawn with a --re-border-default border against --re-color-text-muted; it conveys grouping visually but the labels it sits between (Edit / Duplicate / Delete) remain the meaningful content. If a divider is purely cosmetic and adds no grouping information, give it role="presentation" instead so it is ignored by assistive tech.

See the accessibility guide for system-wide conventions.