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.

Variations

Orientation

Horizontal

A horizontal divider.

Vertical

A vertical divider.

Modifiers

Type

Default

A default divider.

Inverse

An inverse divider.

Examples

Outlines the atomic level interactive elements for the component.

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

Resources

Figma Component
 Available
Figma Documentation
 Planned
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 Available
iOS JustUI [UI Kit]
 Available
iOS PIE [SwiftUI]
 Planned
Android [XML views]
 Alpha
Android [Jetpack compose]
 Alpha