Divider

A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Divider

A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Orientation of the divider.
label	ReactNode		Optional label centered on the divider. Numeric zero is preserved; null, booleans, and empty strings render no label.
variant	'subtle' \| 'strong'	'subtle'	Visual weight of the divider line.
isFullBleed	boolean	false	Extend the divider to container edges with negative margins.
xstyle	StyleXStyles		StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Usage guidance

Use subtle dividers between related content sections and strong dividers for high-contrast boundaries.
Add a label to the divider when sections need a visible category heading.
Avoid: Overuse dividers; rely on spacing and layout to separate content when possible.

Theming API

{
  "targets": [
    {
      "className": "astryx-divider",
      "visualProps": [
        "orientation",
        "variant"
      ]
    }
  ]
}

Anatomy

Divider group: Separator group that arranges one or two rules around an optional label.
Rule: Painted line segment; a second segment renders when a label is present.
Label: Optional content displayed between two rule segments.

Examples

Divider — Variants: Horizontal dividers in subtle and strong variants, plus a labeled divider. A quick visual reference for separator styles.
Divider — Full Bleed: Divider that extends past container padding to span the full width. Use inside cards or panels when you want a clean edge-to-edge separation, like between an order summary and total.
Divider — Variants: Subtle, labeled, and strong dividers in a single card. Use subtle between related sections, labeled for alternatives like "or", and strong for high-contrast boundaries.
Divider — Vertical: Vertical dividers separating side-by-side metrics. Use between stat cards, toolbar groups, or any horizontal layout where you need a visual boundary between sections.