Skip to main content

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 Orientation

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

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

Composition

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"