Divider

The Divider component draws a line between two pieces of content. It can run across or down, carry a label such as 'OR', and use a solid, dashed or dotted line.

Example

Import the component and drop it between two blocks. On its own it renders a real <hr>, so it means something to a screen reader as well as to the eye.

Everything above the line.

Everything below the line.

Svelte 
<script>
  import { Divider } from "theui-svelte";
</script>

<p>Everything above the line.</p>
<Divider />
<p>Everything below the line.</p>

Variants

The variant prop sets the line style: solid (default), dashed or dotted.

Svelte 
<Divider />
<Divider variant="dashed" />
<Divider variant="dotted" />

Label

Put content inside the component and it is placed in the middle of the line. This is the usual way to write an OR between two sign-in options.

OR
Continue below
Svelte 
<Divider>OR</Divider>
<Divider variant="dashed">Continue below</Divider>

Label Alignment

With a label, the align prop decides where it sits: center (default), start or end. The alignment follows the text direction, so it flips on a right to left page.

Start
Center
End
Svelte 
<Divider align="start">Start</Divider>
<Divider align="center">Center</Divider>
<Divider align="end">End</Divider>

Vertical Divider

Set orientation="vertical" to separate items that sit side by side. The divider takes the height of its parent, so place it in a flex row with a height.

Profile Settings Sign out
Svelte 
<div class="flex h-16 items-center gap-4">
  <span>Profile</span>
  <Divider orientation="vertical" />
  <span>Settings</span>
  <Divider orientation="vertical" variant="dashed" />
  <span>Sign out</span>
</div>

Vertical Label

A vertical divider takes a label too. The line is drawn above and below the text.

Sign in
OR
Create account
Svelte 
<div class="flex h-40 items-center gap-4">
  <span>Sign in</span>
  <Divider orientation="vertical">OR</Divider>
  <span>Create account</span>
</div>

Customization

Use lineClasses for the line and labelClasses for the text. The class prop goes on the element itself, which is where spacing belongs.

NEW
Svelte 
<Divider lineClasses="border-brand-500" />
<Divider lineClasses="border-2 border-info-500" variant="dashed" />
<Divider class="my-8" labelClasses="rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-on-brand">
  NEW
</Divider>

Accessibility

Without a label the component renders an <hr>, or a vertical separator with aria-orientation="vertical", both of which assistive technology understands as a break between sections. With a label, the lines are hidden from screen readers and only the text is read, because a separator cannot hold a name of its own. Decoration alone does not need a divider: if the parts are already separate landmarks or headings, the line adds nothing.

Configuration