Layout

Divider

Visual separator rendered as an <hr> — or as a role="separator" element with centered content when a label is given. Supports vertical orientation and dashed lines.

Import

import { Divider } from "@zephora/react";

Examples

Basic

Solid by default; `variant="dashed"` switches the line style.

Above

Between

Below

<p>Above</p>
<Divider />
<p>Between</p>
<Divider variant="dashed" />
<p>Below</p>

With label

The label is centered between two lines.

or continue with

<Divider label="or continue with" spacing={4} />

Vertical

Vertical dividers separate inline items; give the row a height.

Docs

API

Blog

<HStack gap={3} style={{ height: 24 }}>
  <span>Docs</span>
  <Divider orientation="vertical" />
  <span>API</span>
  <Divider orientation="vertical" />
  <span>Blog</span>
</HStack>

API

Divider props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Axis of the separator line.
`label`	`ReactNode`	—	Content rendered centered with a line on both sides. Switches the element from <hr> to a div with role="separator".
`variant`	`"solid" \| "dashed"`	`"solid"`	Line style.
`spacing`	`number \| string`	—	Margin along the block axis (inline axis when vertical). Numbers are a 0.25rem grid (4 → 1rem).
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.