Divider

A divider serves as a visual separator between two elements

Resources

Figma Component

MDX Icon Button

Git Repository

MDX Icon Button

Intro & Anatomy

Dividers are used in lists and layouts to visually divide content, effectively separating and organising content into distinct groups. By grouping and dividing content in close proximity, dividers enhance the clarity of a layout. Additionally, they can establish rhythm and hierarchy within the overall design.

Dividers can be used horizontally and vertically.

Options & Styles

Variants

MDX offers 2 divider variants for different contexts:

default as a solid stroke
alternate as either a thicker stroke or dotted line

Best Practice & Usage

Dividers should be used to create clear visual and semantic separation between content sections.

Use dividers to improve content organisation and readability whilst maintaining clean, structured layouts.

Do use as a visual divider
Use a divider to separate elements visually and semantically.

Don't use a divider as a border
Don’t use dividers as a border for elements.

Do display full width on mobile
Use full-width dividers on mobile to maintain clear visual separation across the entire screen.

Don't display shorter than full width on mobile
Avoid using partial-width dividers on mobile as they can create visual confusion and unclear content boundaries.

Theming

You can customise colours, border widths, margin and border-style to match your design requirements.

Dotted is the only border-style currently available.

For other styles, we recommend using custom code or SVG implementation.