Divider

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

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

Import#

import { CDivider } from "@chakra-ui/vue";

Usage#

It renders a horizontal divider by default.

<c-divider />

Changing the orientation#

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

<c-flex>
  <span>Part 1</span>
  <c-divider orientation="vertical" />
  <span>Part 2</span>
</c-flex>

Changing the border-color#

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

<c-box>
  <span>Part 1</span>
  <c-divider border-color="red.200" />
  <span>Part 2</span>
</c-box>

Props#

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