Divider

Divider is used to visually separate content in a list or group.

Import#

import { Divider } from "pearl-ui";

Usage#

<Divider />

Divider orientation#

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

<Divider orientation="horizontal" />
<Divider orientation="vertical" />

Override Style#

The Divider component also supports a variety of style props which can be used to override the pre-defined style in the theme. Manual style props passed into the component have a higher precedance than the default component style.

// passing style prop bg="red" overrides the default component style value of bg="neutral.300"<Divider bg="red" />

Example#

Light
Dark

Embed not loading? Click here

Props#

Supported style props#

The Divider component supports the following style props:

backgroundColor (Only backgroundColor props are supported, not the color prop)
layout
position
opacity and visiblity
margin and padding

Additional props#

Name	Required	Type	Default	Description
size	false	PearlTheme.components.Divider["sizes"]		The size of the divider
variant	false	PearlTheme.components.Divider["variants"]		The variant of the divider
thickness	false	number	`1`	The thickness of the divider
length	false	number \| string	`"100%"`	The length of the divider
orientation	false	"horizontal" \| "vertical"	`"horizontal"`	The direction of the divider

Default Component Style#

export default {  baseStyle: {    orientation: "horizontal",    bg: {      light: "neutral.300",      dark: "neutral.900",    },    thickness: 1,    length: "100%",  },};