Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Components

Divider

Dividers visually separate different content and can be used vertically or horizontally.

Status

Supported

Introduced

v3.8.0

View codeView StorybookView Design

Anatomy

The divider component contains one required element.

ItemNameDescriptionComponentOptional

Options

The divider has an option for different use cases:

Orientation

Display a divider horizontally or vertically.

Orientation

Display a divider horizontally or vertically.

Example

Here are some examples of the divider in action:

Divider with stack

Use this approach where you want equal spacing between elements. This example shows how to use the divider inside a stack. Use flow=horizontal-stretch and wrap the divider in a stackChild to stretch it to the height of the container.

Horizontal divider with block

Use this approach where you want irregular spacing between elements. This example shows the divider as a visual separator between two block elements. Use the container styledBlock to constrain the divider's width.

Vertical divider with block

Use this approach where you want irregular spacing between elements. This example shows the vertical divider as a visual separator between two inline blocks. Use the inline divider container to constrain the height of the block.

Usage

Here’s how and when to use the divider:

Use as a semantic divider element

Use dividers when you need a semantic divider element. If you need a decorative border, consider a border on a stylePreset instead.

API

Divider

The divider has a range of props and overrides to define the experience in different use cases. You can define the divider’s appearance with a single stylePreset.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?