Skip to main content

Divider

Pattern
Live

The Divider pattern provides the user a visual break between content.

FigmaCode

Usage​

Divider is a simple visual element that creates a horizontal line between sections of content. It comes with options for solid or dotted styling, and can display inserted text. Dividers can be restyled with any colour from the Chroma palette.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Divider } from "@iag/chroma-react-ui.components";

When to use​

Use Divider when you want to create a clear separation between different content blocks or sections.

When to avoid​

Avoid using Divider to create space between components, consider adjusting spacing.

Do

  • Do customise the style and colour of Divider as required.

Don't

  • Don't use Divider merely to create space between components.
  • Don't use Divider to group related content.

Text​

Text can be inserted into the Divider for additional context or to title a section.