Divider

Basics

A horizontal Divider draws a single hairline between blocks. By default it carries the separator role for assistive tech.

Labelled

Pass a label (horizontal only) to centre a mono caption between two rules — useful for marking a boundary like an epoch or a date break.

Vertical

orientation="vertical" gives a hairline for inline separation — metadata runs, toolbars, breadcrumb-like clusters. It needs a parent with a defined height.

When to use it

Use a Divider when a boundary needs to be visible — a rule that groups or separates content. When you only need empty space, use a Spacer or a Stack gap instead; an invisible gap shouldn't be a hairline. Mark a Divider decorative when it is purely visual and the grouping is already clear from structure, so it drops out of the accessibility tree. Note that Section with surface and Panel already draw their own edge hairlines — don't add a Divider on top of those seams.

Accessibility

• Defaults to `role="separator"` with `aria-orientation` reflecting the axis.
• `decorative` swaps in `role="none"` and `aria-hidden`, removing it from the a11y tree.
• A labelled Divider still exposes the separator role; the label is visible text, not the accessible boundary.

Mobile (React Native)

Preview. @protocore/pds-mobile ships the React Native sibling of Divider. It mirrors the web API where React Native allows; the package is a preview with no device-level QA yet, so pin it and expect small changes.

Import it from the mobile package (not @protocore/pds), inside a <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:

import { Divider } from "@protocore/pds-mobile";

Parity with web. A hairline separator, horizontal or vertical, with an optional centred mono label.

• Uses StyleSheet.hairlineWidth for a true device-pixel rule (sanctioned for Divider in the conventions).
• The centred label is horizontal-only.

<Divider label="OR" />