Divider

A thin line or space that visually divides or separates content.

Usage

A Divider is useful in UI designs to clearly distinguish between different sections of content or to group related items together.

Horizontal Divider

Render a basic horizontal Divider.

<Divider my="4" orientation="horizontal" />

Vertical Divider

Render a vertical Divider.

<Flex direction="row" justify="center" height="100%">
  <Divider orientation="vertical" />
</Flex>

Custom Color

You can also customize the divider's appearance with a specific color.

<Divider my="4" orientation="horizontal" color="red" />

API

Props

Prop	Type	Default	Required
orientation	'horizontal' | 'vertical'	'horizontal'	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
size	Responsive<Size>	'medium'	-