Divider

Overview

The Divider lives in @flatpay-dk/ui and renders the system’s canonical 1 px line. One axis — orientation(horizontal or vertical) — and that’s the entire surface area. The component never gets thicker, never changes colour for emphasis. Need a heavier break? Use more space, not a thicker line.

Orientation

Horizontal by default. Vertical when adjacent siblings sit on the same row — stat bars, toolbars, kbd shortcut clusters. The component stretches to fill its parent on the cross-axis: a horizontal divider fills the parent’s width, a vertical one fills its height.

In context

Two real surfaces — a settings list with horizontal dividers between rows, and a stat bar with vertical dividers between values. Dividers are siblings of the content; they do not wrap their parent.

Divider vs. divide-*

When every sibling in a list needs a line between it, reach for Tailwind’s divide-y /divide-xon the parent. It’s less DOM noise, the spacing is implicit, and the rule reads as one decision instead of N. Use <Divider /> when you need one explicit, semantic break — between the manage and danger sections of a menu, between the profile and workspace regions of a settings card.

// ✓ Repeating siblings — let the parent draw the lines
<ul className="divide-y rounded-2xl border bg-card">
  <li className="px-5 py-4">…</li>
  <li className="px-5 py-4">…</li>
  <li className="px-5 py-4">…</li>
</ul>

// ✓ One semantic break between two regions
<section>
  <ProfileForm />
  <Divider className="my-6" />
  <WorkspaceForm />
</section>

Accessibility

• Semantic by default. Renders role="separator" with the matching aria-orientation. Screen readers announce a break in content.
• Decorative escape hatch. Set decorative when the line is purely visual — for instance, a thin separator inside a composed glyph or a prose flourish — and the component drops the separator semantics.
• Don’t over-announce.When you’ve reached for divide-y, you don’t need separator semantics on every row — the list structure (role="list") already communicates the grouping.

Code

The component is purely presentational — no state, no events. Two props.

import { Divider } from "@flatpay-dk/ui";

// Horizontal, the most common case
<Divider />

// Vertical, between two values in a stat bar
<div className="flex h-12 items-center gap-4">
  <span>Today</span>
  <Divider orientation="vertical" />
  <span>Yesterday</span>
</div>

// Decorative — opt out of separator semantics
<Divider decorative />

Best practices

• Default to spacing, not lines. Most separation between siblings is solved by gap-* on the parent. A divider is an explicit this is a breaksignal — reach for it when whitespace alone isn’t doing the work.
• Inside a card → space, not a line. A card is already a containment border; another line on its outer edge competes. Internal section breaks usually want extra padding, not another stroke.
• Don’t recolour for status.A red or amber divider isn’t how status enters the system — that’s what status pills, banners, and inline messages are for. Dividers stay mono.
• Never thicken the stroke.If the divider needs to feel heavier, increase the spacing on either side — don’t add h-0.5. Anything thicker than 1 px stops reading as a divider.

Props

Related