Divider

Horizontal or vertical rule for separating adjacent content, rendered as a semantic <hr>.

import { Divider } from "@ps1ui/core";

Basic

Section one.

Section two.

<Text>Section one.</Text>
<Divider />
<Text>Section two.</Text>

Variants

solid

dashed

dotted

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

Vertical (toolbar)

File

Edit

View

<Stack direction="row" gap="md" align="center">
  <Text>File</Text>
  <Divider orientation="vertical" />
  <Text>Edit</Text>
  <Divider orientation="vertical" />
  <Text>View</Text>
</Stack>

Vertical variants

solid

dashed

dotted

<Stack direction="row" gap="md" align="center" style={{ height: 60 }}>
  <Text variant="muted">solid</Text>
  <Divider orientation="vertical" variant="solid" />
  <Text variant="muted">dashed</Text>
  <Divider orientation="vertical" variant="dashed" />
  <Text variant="muted">dotted</Text>
  <Divider orientation="vertical" variant="dotted" />
</Stack>

Divider renders a semantic <hr> so the implicitseparator role is exposed to assistive tech without a manualrole attribute. The vertical variant addsaria-orientation="vertical" and takes its height from the parent's cross-axis via align-self: stretch — use it inside a flex or grid row.

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Axis the rule paints along.
`variant`	`"solid" \| "dashed" \| "dotted"`	`"solid"`	Border style used for the rule.

All native <hr> attributes are also accepted.