Dowe

DISPLAY

Divider

Divider creates an intentional visual boundary without adding hidden layout or spacing assumptions.

ONE LINE, TWO AXES

Keep structure visible

Choose horizontal for sections and vertical for compact toolbars or split panels.

PLAYGROUND

Compare orientation and scheme

Horizontal lines fill the available width. Vertical lines fill the authored height, so pair them with an explicit h when the surrounding content has no intrinsic height.

Horizontal content boundary

The divider separates two semantic bands while the Grid owns the gap around them.

Continue with the next section of the workflow.

Divider orientation:"horizontal" scheme:"primary"
Divider orientation:"vertical" scheme:"secondary" h:12

ADVANCED LAYOUTS

Compose a split toolbar

Divider is deliberately neutral: parent Flex or Grid owns alignment, spacing, and responsive behavior.

FILTER

All records

SORT

Recently updated

STATUS

Synchronized

SECTION RHYTHM

Explicit boundaries

Use the page Section and Grid gap for rhythm, then place Divider only where the line itself carries meaning.

TOKEN COLORS

Semantic emphasis

Muted

Primary

Danger

HORIZONTAL

Width follows the parent

Use the parent layout to define horizontal padding and gap.

VERTICAL

Height is intentional

Set h when a vertical line sits beside content with no shared intrinsic height.

PORTABLE

No children

Divider is a leaf component; it never owns content or an implicit spacer.

API

Props

Divider also accepts common identity, spacing, sizing, visibility, radius, border, and accessibility props.

Prop	Type	Default
No data There are no records to display

No data