Balance Logo
Balance
Reckon Design System

Divider

Use divider to separate and group content.
Install
pnpm add @reckon-web/divider
Import usage
import {
Divider,
DividerContext
} from '@reckon-web/divider';
  • Code
  • API

Note: For most cases use the Stack component to layout elements with dividers between each item.

First item
Second item
Third item
Open in Playroom

Usage

Add a divider to separate and group your content.

Above
Below

Orientation

It may seem counterintuitve, but setting the orientation to "vertical" creates a horizontal line that divides the content vertically, and vice versa.

  • vertical (default)
  • horizontal
First
Second

Margin

The divider implements the Box component, accepting the margin properties:

Above
Below
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.