Divider

Copy for LLM

A Divider is a thin line that creates separation between two UI elements, separating content into clear groups of lists and layouts, with a role="separator".

Import

import { Divider } from "@cfa/react-core";

Live Editor

Guidelines

When to use

Divider is a line that separates semantically distinct content.

Do

Use sparingly. Extra lines add visual noise.

Avoid

Using Divider when whitespace would separate the content equally well.
Using Divider as decoration.

Examples

Default

Subtle

The default divider uses a bold border. Set variant="subtle" for the lighter border treatment.

Orientation

By default the Divider’s orientation is set to "horizontal".

Set the orientation prop to "vertical", to vertically separate content. The Divider’s must be in a child of a flex parent with flex-direction: row when set to "vertical".