Divider

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

Import

import { Divider } from '@chakra-ui/react';

Usage

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

<Divider />

<Divider />

Divider Orientation

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

<Divider orientation='horizontal' />

<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>

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

Composition

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

<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

string

size

Description

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

Type

string

variant

Type

"solid" | "dashed"

Default

"solid"