Content Divider

A thin line that separates groups of content. It can carry a short label in the middle, or a button that reveals more.

Preview

Variant

Recent activity

Maya updated the launch plan.

Earlier

Omar joined the workspace.

When to use

Between sections of a form, a menu or a feed, where space alone is not enough.
With text, for a split such as "or" between two ways to sign in.
With a button, to load or expand more content in place.

Anatomy

1
Line
1px, in the border grey.
2
Label
Optional, centred, in small secondary text.
3
Button
Optional, centred, a small stroke button in place of the label.

States

Line

A plain rule.

With text

The line breaks around a label.

With button

The line breaks around a button.

Accessibility

A plain divider is an <hr> or role="separator", or decorative with aria-hidden when it only adds space.
A divider's button is a native <button> with a clear label; if it expands content, it uses aria-expanded.

Source

The Content Divider is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.

Tell me when the source lands Tell me when the source landsand you'll get 10% off your first licence if you ever want the full library.

See it in a block

All documentation