Back to Chakra Ui

Separator

apps/www/content/docs/components/separator.mdx

0.3.0-beta1.0 KB
Original Source
<ExampleTabs name="separator-basic" />

Usage

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

Examples

Variants

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

<ExampleTabs name="separator-with-variants" />

Sizes

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

<ExampleTabs name="separator-with-sizes" />

Label

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

<ExampleTabs name="separator-with-label" />

Vertical

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

<ExampleTabs name="separator-vertical" />

Responsive Orientation

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

<ExampleTabs name="separator-with-responsive-orientation" />

:::note

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

:::

Props

<PropTable component="Separator" part="Separator" />