Skip to content

Separator

Preview Available in release assets

Divide sibling content or inline controls with a native, theme-aware boundary that respects logical writing modes and forced colors.

Separator primary example

Show code
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Account</h2>
  <p>Update your profile and preferences.</p>
  <hr class="thin-separator">
  <h3>Notifications</h3>
  <p>Choose which emails you receive.</p>
  <p class="thin-cluster" style="align-items: center">
    <a href="/preferences">Preferences</a>
    <span class="thin-separator" role="separator" aria-orientation="vertical"></span>
    <a href="/sessions">Sign-in activity</a>
  </p>
</section>

Each authored example uses the production assets and includes copyable markup.

Native horizontal boundary

Prefer hr between thematic sections; headings still describe their subjects.

Show code
<section style="overflow-wrap: anywhere">
  <h2>Profile</h2>
  <p style="overflow-wrap: anywhere">Public account details.</p>
  <hr class="thin-separator">
  <h3>Notifications</h3>
  <p style="overflow-wrap: anywhere">Email preferences.</p>
</section>

Generic horizontal boundary

A generic element needs an explicit separator role. It does not receive focus.

Show code
<p style="overflow-wrap: anywhere">First group.</p>
<div class="thin-separator" role="separator">
</div>
<p style="overflow-wrap: anywhere">Second group.</p>

Vertical inline boundary

Related links retain a named navigation group and can wrap on narrow screens.

Show code
<nav aria-label="Documentation sections" style="display: flex; flex-wrap: wrap; align-items: center; overflow-wrap: anywhere">
  <a href="/components/">Components</a>
  <span class="thin-separator" role="separator" aria-orientation="vertical"></span>
  <a href="/layouts/stack/">Layouts</a>
</nav>

Prominent boundary

A heavier border increases visual weight without replacing section headings.

Show code
<p style="overflow-wrap: anywhere">End of account settings.</p>
<hr class="thin-separator" data-variant="prominent">
<p style="overflow-wrap: anywhere">Security settings follow.</p>

Anatomy

  • Native hr element or a generic element with role="separator" and class="thin-separator"
  • Optional aria-orientation="vertical" for inline dividers
  • Optional data-variant="prominent" for heavier weight
  • Theme-driven border color and logical margins

Variants and sizes

  • Horizontal block divider (hr) — shown above
  • Horizontal generic divider (role="separator") — shown above
  • Vertical inline divider (aria-orientation="vertical") — shown above
  • Prominent variant (data-variant="prominent") — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long sections in a narrow measure

Content wraps independently of its boundary. Check the same grouping at 200% and 400% zoom.

Show code
<article style="max-inline-size: 18rem; overflow-wrap: anywhere">
  <h2>Reading preferences</h2>
  <p style="overflow-wrap: anywhere">Choose a comfortable reading size and a clear contrast. These settings describe content before the next section begins.</p>
  <hr class="thin-separator">
  <h3>Delivery preferences</h3>
  <p style="overflow-wrap: anywhere">Delivery choices belong to their own named section, even when the visual divider is unavailable.</p>
</article>

The named navigation group carries the relationship; the boundary is never a keyboard stop.

Show code
<nav aria-label="Documentation sections" style="display: flex; flex-wrap: wrap; align-items: center; overflow-wrap: anywhere">
  <a href="/components/">Components</a>
  <span class="thin-separator" role="separator" aria-orientation="vertical"></span>
  <a href="/layouts/stack/">Layouts</a>
</nav>

RTL group

Logical border and spacing follow the authored direction.

Show code
<div dir="rtl">
  <nav aria-label="Documentation sections" style="display: flex; flex-wrap: wrap; align-items: center; overflow-wrap: anywhere">
    <a href="/components/">Components</a>
    <span class="thin-separator" role="separator" aria-orientation="vertical"></span>
    <a href="/layouts/stack/">Layouts</a>
  </nav>
</div>

System colors and print

Borders remain visible when background printing is disabled. Inspect print preview and system forced colors; named sections remain understandable without styling.

Show code
<section style="overflow-wrap: anywhere">
  <h2>Before the boundary</h2>
  <p style="overflow-wrap: anywhere">Readable section content.</p>
  <hr class="thin-separator">
  <h3>After the boundary</h3>
  <p style="overflow-wrap: anywhere">Another readable section.</p>
</section>
  • Between long-form sections — shown above
  • Between grouped inline controls — shown above
  • Right-to-left content — shown above
  • Forced colors — shown above
  • Print — shown above
  • Narrow container — shown above
  • 200% and 400% zoom — shown above

Interaction and keyboard behavior

The separator is presentational and never receives keyboard focus or pointer events; it does not replace the semantics of an authored heading, list, or landmark.

Accessibility

Prefer hr for block divisions so the boundary carries a semantic role automatically. When an inline divider is needed, use a generic element with role="separator" and aria-orientation="vertical" so assistive technology can still expose orientation. Do not rely on a separator to communicate hierarchy or grouping that requires a heading, list, or landmark.

Contract
NATIVE
Basis
Native <kbd> and non-focusable separator; a focusable separator must move to the experimental splitter contract
Evidence
  • tests/unit/library/spinner-kbd-separator.test.ts

API

Use hr.thin-separator for block boundaries. Use .thin-separator[role="separator"][aria-orientation="vertical"] for inline dividers between related controls. Add data-variant="prominent" to increase visual weight; adjust surrounding spacing with logical margins on the container.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without Thin-Sky CSS the native hr keeps its default browser boundary and generic role="separator" elements remain in document flow.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/separator/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes