Divider

1import { Divider } from '@/ui/Display'23// Decorative by default: aria-hidden, no role.4<Divider />56// Vertical, in a toolbar. Always shorter than the row.7<Divider orientation="vertical" className="h-5" />89// Labelled — the one case where the divider carries meaning.10<Divider label="or" />1112// Meaningful: between groups in a menu, where the line is the ONLY grouping13// signal a sighted user gets.14<div role="menu">15  <button role="menuitem">Rename</button>16  <div role="separator" />17  <button role="menuitem">Delete</button>18</div>1920// The asymmetry, as a token pair. The eye reads a rule as belonging to the21// content BENEATH it.22.section-break {23  margin-block: var(--space-5) var(--space-4);   /* 20px / 16px */24}2526// Before reaching for this component at all, try:27<Stack gap="lg">…</Stack>

<!-- Decorative. Silent to assistive tech. -->
<hr aria-hidden="true" class="ds-divider" />

<!-- Thematic break in prose. <hr> already has role="separator". -->
<p>The rollback completed in eight seconds.</p>
<hr />
<p>A postmortem was filed the following morning.</p>

<!-- Meaningful: the line is the only grouping signal here. -->
<div role="menu" aria-label="Actions">
  <button type="button" role="menuitem">Rename</button>
  <button type="button" role="menuitem">Duplicate</button>
  <div role="separator"></div>
  <button type="button" role="menuitem">Delete</button>
</div>

<!-- Vertical, in a toolbar. -->
<div role="toolbar" aria-label="Formatting">
  <button type="button">…</button>
  <span role="separator" aria-orientation="vertical"></span>
  <button type="button">…</button>
</div>

<!-- Labelled: the rule breaks around the word rather than running behind it. -->
<div class="ds-divider ds-divider--labelled">
  <span>or</span>
</div>

.ds-divider {
  border: 0;
  block-size: 1px;                   /* never 2: that is a border */
  background: var(--ds-border-subtle);
  /* More above than below. The eye reads a rule as belonging to the content
     beneath it, so equal margins leave it belonging to neither. */
  margin-block: var(--space-5) var(--space-4);
}

.ds-divider[aria-orientation='vertical'],
.ds-divider--vertical {
  inline-size: 1px;
  /* Shorter than the row: a full-height rule reads as a container edge. */
  block-size: 20px;
  margin-block: 0;
  margin-inline: var(--space-2);
}

/* The line breaks AROUND the label. A label on an unbroken rule reads as
   struck through. */
.ds-divider--labelled {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  block-size: auto;
  color: var(--ds-fg-muted);
  font-size: 12px;
}
.ds-divider--labelled::before,
.ds-divider--labelled::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: var(--ds-border-subtle);
}

/* In a list with leading avatars, separate the ROWS, not the panel. */
.ds-list > * + *::before {
  content: '';
  display: block;
  block-size: 1px;
  margin-inline-start: 52px;         /* aligned to the text */
  background: var(--ds-border-subtle);
}

/* A background-drawn rule vanishes in forced colors. */
@media (forced-colors: active) {
  .ds-divider { border-block-start: 1px solid; block-size: 0; }
}