Layout
Separator
A thin horizontal or vertical line between sections of content or related items.
| Class name | Type | Description |
|---|---|---|
dividerplf:divider | Component | A line between content, horizontal by default |
divider-horizontalplf:divider-horizontal | Direction | A vertical line between items in a row |
Default
The line has no margin, so space it with the layout around it.
Section one
Section two
<div class="flex flex-col gap-4">
<p>Section one</p>
<hr class="divider">
<p>Section two</p>
</div><div class="plf:flex plf:flex-col plf:gap-4">
<p>Section one</p>
<hr class="plf:divider">
<p>Section two</p>
</div>import { Separator } from '@pelatform/react';
export function Example() {
return (
<div className="flex flex-col gap-4">
<p>Section one</p>
<Separator />
<p>Section two</p>
</div>
);
}import { Separator } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:flex plf:flex-col plf:gap-4">
<p>Section one</p>
<Separator />
<p>Section two</p>
</div>
);
}<div class="flex flex-col gap-4">
<hr class="divider" aria-hidden="true">
<span class="divider"></span>
</div><div class="plf:flex plf:flex-col plf:gap-4">
<hr class="plf:divider" aria-hidden="true">
<span class="plf:divider"></span>
</div>import { Separator } from '@pelatform/react';
export function Example() {
return (
<div className="flex flex-col gap-4">
<Separator aria-hidden="true" />
<span className="divider" />
</div>
);
}import { Separator } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:flex plf:flex-col plf:gap-4">
<Separator aria-hidden="true" />
<span className="plf:divider" />
</div>
);
}<div class="flex flex-wrap items-center gap-3">
<a href="#">Home</a>
<span class="divider divider-horizontal"></span>
<a href="#">Docs</a>
<span class="divider divider-horizontal"></span>
<a href="#">Help</a>
</div><div class="plf:flex plf:flex-wrap plf:items-center plf:gap-3">
<a href="#">Home</a>
<span class="plf:divider plf:divider-horizontal"></span>
<a href="#">Docs</a>
<span class="plf:divider plf:divider-horizontal"></span>
<a href="#">Help</a>
</div>import { Separator } from '@pelatform/react';
export function Example() {
return (
<div className="flex flex-wrap items-center gap-3">
<a href="#">Home</a>
<Separator orientation="vertical" />
<a href="#">Docs</a>
<Separator orientation="vertical" />
<a href="#">Help</a>
</div>
);
}import { Separator } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:flex plf:flex-wrap plf:items-center plf:gap-3">
<a href="#">Home</a>
<Separator orientation="vertical" />
<a href="#">Docs</a>
<Separator orientation="vertical" />
<a href="#">Help</a>
</div>
);
}A vertical line with meaning needs role="separator" and aria-orientation="vertical" on a <div>, since an <hr> is always announced as horizontal.
React
Separator from @pelatform/react renders this line, and orientation picks its form.
| Prop | Values | Default |
|---|---|---|
orientation |
horizontal, an hr; vertical, a span with divider-horizontal between items in a row |
horizontal |
The other props are the element’s own, className and ref included.
CSS variables
Override on a root or on a single line; length is the long side and thickness the short side.
| Variable | Default |
|---|---|
--plf-separator-color |
Subtle border |
--plf-separator-thickness |
Border width, 1px |
--plf-separator-length |
100% horizontal; vertical lines stretch in a flex row |
<div class="flex flex-wrap items-center gap-3">
<a href="#">Home</a>
<span class="divider divider-horizontal" style="--plf-separator-length: 16px; align-self: center"></span>
<a href="#">Docs</a>
</div><div class="plf:flex plf:flex-wrap plf:items-center plf:gap-3">
<a href="#">Home</a>
<span class="plf:divider plf:divider-horizontal" style="--plf-separator-length: 16px; align-self: center"></span>
<a href="#">Docs</a>
</div>import type { CSSProperties } from 'react';
import { Separator } from '@pelatform/react';
export function Example() {
return (
<div className="flex flex-wrap items-center gap-3">
<a href="#">Home</a>
<Separator orientation="vertical" style={{ '--plf-separator-length': '16px', alignSelf: 'center' } as CSSProperties} />
<a href="#">Docs</a>
</div>
);
}import type { CSSProperties } from 'react';
import { Separator } from '@pelatform/react/prefixed';
export function Example() {
return (
<div className="plf:flex plf:flex-wrap plf:items-center plf:gap-3">
<a href="#">Home</a>
<Separator orientation="vertical" style={{ '--plf-separator-length': '16px', alignSelf: 'center' } as CSSProperties} />
<a href="#">Docs</a>
</div>
);
}