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 flex="1" /> <Text flexShrink="0">Label (center)</Text> <Separator flex="1" /> </HStack> </Stack> ) } Vertical
Use the orientation prop to change the orientation of the separator.
First
Second
import { HStack, Separator, Text } from "@chakra-ui/react" const Demo = () => { return ( <HStack gap="4"> <Text>First</Text> <Separator orientation="vertical" height="4" /> <Text>Second</Text> </HStack> ) } Responsive Orientation
Here's an example of how to change the orientation property based on the screen size.
First
Second
import { Separator, Stack } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Stack direction={{ base: "row", md: "column" }} align="stretch"> <DecorativeBox>First</DecorativeBox> <Separator orientation={{ base: "vertical", sm: "horizontal" }} /> <DecorativeBox>Second</DecorativeBox> </Stack> ) } 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
| 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.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |