Color Schemes for Divider
are not implemented in the default theme. You can extend the theme to implement them.
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 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
colorScheme
Description
Type
(string & {})
size
size
Description
Sizes for Divider
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
variant
variant
Type
"solid" | "dashed"
Default
"solid"