Skip to main content

Divider

A divider is a visual element used to create a separation or divide between sections, content or components within a user interface.

Dos and Don'ts

Do
  • Use a divider to separate related elements into groups or break up dense content.
  • Use a divider when items can't be separated with open space.
Don't
  • Don't change the colour or stroke style of the divider.
  • Don't overuse dividers and create unnecessary noise.

Anatomy

Anatomy of a divider.
  1. Divider: 1px line.
  2. Label: Text that describes the content split by the divider.

Variations

Orientation

Horizontal

A horizontal divider.

Vertical

A vertical divider.

Modifiers

Type

Default

A default divider.

Inverse

An inverse divider.

Label

Label is only available for the horizontal variant.

Without label


A default divider without label.

With label

Dividers on both sides have a minimum width of 16px.

A default divider with label.

Content

  • Ensure the label is clear and concise, giving users immediate understanding of the separated content.
  • Use sentence case.

Examples

LTR examples

Here are some examples of the component in a left-to-right context:

Examples of a divider inside of a menu.
Examples of a divider between different blocks of text.

RTL examples

Divider stays the same in RTL.
Back to top