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 "@chakra-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="red.200" />
  <span>Part 2</span>
</Box>

Props#

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