Divider

A rule between blocks of content. Kobalte's Separator renders role="separator" with its orientation on it, so it needs no class.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`divider`	A horizontal rule with vertical margins
`divider-vertical`	A vertical rule, for a flex row

Basic

<p>Above the rule.</p>
<hr class="divider" />
<p>Below it.</p>
<div class="flex" style="align-items: center">
  <span>Left</span>
  <hr class="divider divider-vertical" style="height: 1.5rem" />
  <span>Right</span>
</div>

<p>Above the rule.</p>
<hr class="divider" />
<p>Below it.</p>
<div class="flex" style="align-items: center">
  <span>Left</span>
  <hr class="divider divider-vertical" style="height: 1.5rem" />
  <span>Right</span>
</div>

import { Separator } from "@kobalte/core/separator";

<Separator />
<Separator orientation="vertical" />

<p>Above the rule.</p>
<hr role="separator" data-orientation="horizontal" />
<p>Below it.</p>
<div class="flex" style="align-items: center">
  <span>Left</span>
  <hr role="separator" data-orientation="vertical" style="height: 1.5rem" />
  <span>Right</span>
</div>

A bare <hr> is prose: it takes the typography rule inside .prose and the tight rule inside a .menu. .divider is the standalone one.