Divider

Displays a thin horizontal or vertical line, and renders a hr tag.

Divider is based on Chakra UI Separator. See API-reference for Chakra UI Separator.

Component usage

The Divider will by default be in a horizontal direction, filling the width of it’s parent container.

import { Box, Divider } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box width="100px">
      <Divider />
    </Box>
  );
}

Orientation

Pass the orientation prop and set it to either "horizontal" or "vertical". Default is "horizontal".

Custom divider color

The default color of the Divider is ThemeColor.OnBackgroundBorder. To define a custom divider color, use the borderColor-property.

import { Box, Divider, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box width="100px">
      <Divider borderColor={ThemeColor.Success} />
    </Box>
  );
}