Divider

Dividers are used to visually separate content in a list or group.

chakra ui pro

Import#

import { Divider } from "@chakra-ui/react"

Usage#

The Divider displays a thin horizontal or vertical line, and renders a hr tag.

<Divider />

Divider Orientation#

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

<Divider orientation="horizontal" />

If the vertical orientation is used, make sure that the parent element is assigned a height.

<Center height="50px">
<Divider orientation="vertical" />
</Center>

Composition#

<Stack direction="row" h="100px" p={4}>
<Divider orientation="vertical" />
<Text>Chakra UI</Text>
</Stack>

Props#

colorScheme

Description

Color Schemes for Divider are not implemented in the default theme. You can extend the theme to implement them.

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

size

Description

Sizes for Divider are not implemented in the default theme. You can extend the theme to implement them.

Type
string

variant

Type
"dashed" | "solid"
Default
"solid"
Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel