Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

Divider

The Divider is used to visually separate content in a list or group.

Import

Usage

The Divider renders a thin line vertically or horizontally.

EDITABLE EXAMPLE

Orientation

Pass the orientation prop and set it to either horizontal or vertical.

EDITABLE EXAMPLE

If the vertical orientation is used, make sure that the parent element is assigned a height.

EDITABLE EXAMPLE

Composition

EDITABLE EXAMPLE

Props

NameTypeDefaultDescription
variantstring'solid'The variant of the divider style to use. One of: 'solid', 'dashed', 'dotted'
orientationstring'horizontal'The orientation of the divider. One of: 'horizontal', 'vertical'