Skip to Content
Sponsor

Divider

Dividers are used to visually separate content in a list or group.

Import#

Usage#

The Divider displays a thin horizontal or vertical line, and renders a hr tag.

Editable Example

Divider 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#

Chakra UI

Editable Example

Props#

NameTypeDescriptionDefault
colorSchemestring-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
variantstring-
Edit this page