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.

Overview

The purpose of dividers is to create a clear visual distinction between elements or sections, improving the overall layout and user experience. It helps users understand the structure and hierarchy of the content, making it easier to navigate and understand the interface.

Dividers are commonly used to visually separate different sections, such as between paragraphs of text, in lists, or between distinct components or modules. They provide visual clarity, improve readability, and contribute to a more organised and aesthetically pleasing user interface.

A horizontal divider that separates two sections.

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

Resources

Figma Component
 Stable
Figma Documentation
 Planned
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Planned
Android PIE [Compose & Views]
 Stable