Divider

A thin horizontal or vertical rule for separating sections. Horizontal renders as a semantic <hr>; vertical renders as a <div role="separator"> with aria-orientation.

stable
since v0.1.0
1.49 kB
primitive
layout

Preview

Open

tsx

import { Divider, Stack, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Stack gap="3">
      <Text>Above</Text>
      <Divider />
      <Text>Below</Text>
    </Stack>
  );
}

Orientation

Use orientation="vertical" inside an Inline/Flex row for column dividers. Set length for an explicit height (or width, horizontally) — defaults to the container’s cross-axis size.

Preview

Open

tsx

import { Divider, Inline, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Inline gap="3" align="center" padding="3" background="bg.subtle" borderRadius="md">
      <Text>Files</Text>
      <Divider orientation="vertical" length="1rem" />
      <Text>Activity</Text>
      <Divider orientation="vertical" length="1rem" />
      <Text>Settings</Text>
    </Inline>
  );
}

With a label

Pass children to render an inline label that splits the rule. labelAlign controls where the label sits (start, center, end).

Preview

Open

tsx

import { Divider, Stack, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Stack gap="3">
      <Text>Above the fold</Text>
      <Divider labelAlign="center">OR</Divider>
      <Text>Below the fold</Text>
    </Stack>
  );
}

API

PropTypeDefaultDescription

orientation

"horizontal"|"vertical"

horizontal

Rule axis. Vertical dividers must sit inside a container with an explicit height to be visible.

variant

"solid"|"dashed"|"dotted"

solid

Line style — `solid`, `dashed`, or `dotted`.

thickness

"1"|"2"

Line thickness in pixels.

length

SizeValue

—

Explicit cross-axis length. For `horizontal`, sets the width; for `vertical`, sets the height. Accepts a size token (`"full"`, `"prose"`, …), a space token (`"8"`), or a raw length (`"200px"`).

spacing

SpaceToken

—

Margin on the axis perpendicular to the divider. Horizontal dividers apply it block-wise (above/below); vertical dividers apply it inline (left/right).

tone

"subtle"|"default"|"strong"

default

Colour intensity — `subtle` for a faint thematic rule, `default` for the standard visible rule (matches input borders), `strong` for emphasis.

soft

boolean

false

Fade the rule toward its ends via `mask-image`.

children

ReactNode

—

Inline label rendered between two rules. Horizontal orientation only — ignored (with a dev warning) when `orientation="vertical"`.

labelAlign

"start"|"center"|"end"

center

Alignment for the inline `children` label between the two rules.

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last.

decorative

boolean

true

When `true`, the divider is hidden from assistive tech. Set to `false` to expose it as a meaningful `role="separator"`.

Recipes

Stack dividers={<Divider />} inserts a divider between every pair of children — see Stack.
Use variant="dashed" for a softer break that still reads as a separator.
For purely visual breathing room with no semantics, prefer a Box with marginY or a Spacer inside a flex row.