Divider

Divider for separating content blocks.

Horizontal Divider

Renders a horizontal divider by default.

Above content

Below content

<p>Above content</p>
<ADivider />
<p>Below content</p>

With Text

Insert text in the middle of the divider.

Content area

Section

Another area

<p>Content area</p>
<ADivider> Section </ADivider>
<p>Another area</p>

Dashed

Set dashed for dashed style.

Content

Content

Dashed Section

Content

<ADivider dashed />
<ADivider dashed>Dashed Section</ADivider>

Vertical Divider

Set orientation="vertical" for vertical divider.

Home

Articles

About

<span>Home</span>
<ADivider orientation="vertical" />
<span>Articles</span>

Fade Variant

Set variant="fade" for a tapered fade effect at both ends.

Content

Content

Fade Dashed

Content

Home

Articles

About

<ADivider variant="fade" />
<ADivider variant="fade" dashed>Fade Dashed</ADivider>
<ADivider variant="fade" orientation="vertical" />

API

Props

Name	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Direction
dashed	boolean	false	Dashed style
plain	boolean	false	Plain divider
variant	'line' | 'fade'	'line'	Style, fade tapers at both ends