Separator

Used to visually separate content

AI TipWant to skip the docs? Use the MCP Server

First

Second

Third

Usage

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

<Separator />

Use the variant prop to change the appearance of the separator.

Use the size prop to change the size of the separator.

Use the label prop to add a label to the separator.

Label (start)

Label (end)

Label (center)

Use the orientation prop to change the orientation of the separator.

First

Second

Here's an example of how to change the orientation property based on the screen size.

First

Second

note

When the orientation prop is a responsive value, the separator will be rendered without aria-orientation and the role is set to presentation.

Prop	Default	Type
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`solid`	`'solid' \| 'dashed' \| 'dotted'` The variant of the component
`orientation`	`horizontal`	`'vertical' \| 'horizontal'` The orientation of the component
`size`	`sm`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.