Divider

Used to create visual separation between content.

Panda

import { Divider, Box, HStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";

const Demo = () => {
  return (
    <HStack gap="md">
      <DecorativeBox height="20">Left</DecorativeBox>
      <Divider />
      <DecorativeBox height="20">Right</DecorativeBox>
    </HStack>
  );
};

Usage

import { Divider } from "styled-system/jsx";

<Divider />

Examples

Orientation

Use the orientation prop to change the orientation of the divider.

import { Divider, VStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";

const Demo = () => {
  return (
    <VStack gap="8">
      <Divider orientation="horizontal" />
      <Divider orientation="vertical" />
    </VStack>
  );
};

Thickness

Use the thickness prop to change the thickness of the divider.

import { Divider, VStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";

const Demo = () => {
  return (
    <VStack gap="8">
      <Divider thickness="1px" />
      <Divider thickness="2px" />
      <Divider thickness="4px" />
    </VStack>
  );
};

Color

Use the color prop to change the color of the divider.

import { Divider, VStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";

const Demo = () => {
  return (
    <VStack gap="8">
      <Divider color="gray.200" />
      <Divider color="blue.500" />
      <Divider color="red.500" />
    </VStack>
  );
};

Props

Prop	Type	Description
`orientation`	`horizontal,vertical`	The orientation of the divider. Defaults to `"horizontal"`.
`thickness`	`string`	The thickness of the divider. Defaults to `"1px"`.
`color`	`string`	The color of the divider. Defaults to `"gray.200"`.

On this page

Edit this page on Github