Astryx Design System

Divider@astryxdesign/core v0.0.15 · Divider

Usage

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.

ts
import {Divider} from '@astryxdesign/core/Divider'

Best practices

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

Examples

Common configurations, variations, and states.

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.