Divider

Dividers are used to display a thin horizontal or vertical line.

Divider composes Box so you can use all the style props and add responsive styles as well. It renders an <hr> tag by default.

Import

import { Divider } from '@sajari-ui/core';

Usage

It renders an horizontal divider by default.

<Divider />

Changing the orientation

To change the orientation of the divider, pass the orientation prop and set it to either vertical or horizontal

<Flex>
  <span>Part 1</span>
  <Divider orientation="vertical" />
  <span>Part 2</span>
</Flex>

Changing the border color

To change the border color of the divider, as you can guess, pass the borderColor prop.

<Box>
  <span>Part 1</span>
  <Divider borderColor="border-red-500" />
  <span>Part 2</span>
</Box>

Props

The Divider composes the Box component, so you can pass all Box props.