Separator

Used to visually separate content

First

Second

Third

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

const Demo = () => {
  return (
    <Stack>
      <Text>First</Text>
      <Separator />
      <Text>Second</Text>
      <Separator />
      <Text>Third</Text>
    </Stack>
  )
}

Usage

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

<Separator />

Examples

Variants

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

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

const Demo = () => {
  return (
    <Stack>
      <Separator variant="solid" />
      <Separator variant="dashed" />
      <Separator variant="dotted" />
    </Stack>
  )
}

Sizes

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

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

const Demo = () => {
  return (
    <Stack gap="4">
      <Separator size="xs" />
      <Separator size="sm" />
      <Separator size="md" />
      <Separator size="lg" />
    </Stack>
  )
}

Label

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

Label (start)

Label (end)

Label (center)

import { HStack, Separator, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <HStack>
        <Text flexShrink="0">Label (start)</Text>
        <Separator flex="1" />
      </HStack>

      <HStack>
        <Separator flex="1" />
        <Text flexShrink="0">Label (end)</Text>
      </HStack>

      <HStack>
        <Separator />
        <Text flexShrink="0">Label (center)</Text>
        <Separator />
      </HStack>
    </Stack>
  )
}

Vertical

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