First
Second
Third
Usage
import { Separator } from "chakra-ui-solid";<Separator />Examples
Variants
Use the variant prop to change the appearance of the separator.
Sizes
Use the size prop to change the size of the separator.
Label
Use the label prop to add a label to the separator.
Label (start)
Label (end)
Label (center)
Vertical
Use the orientation prop to change the orientation of the separator.
First
Second
A vertical separator has no height of its own — give it one, as the example does, or let a stretching flex row supply it.
Responsive Orientation
Here’s an example of how to change the orientation property based on the screen size.
When the orientation prop is a responsive value, the separator is rendered without
aria-orientation and the role is set to presentation.
A responsive recipe variant needs one line in your Panda config, because no default staticCss run
generates the per-breakpoint classes:
export default defineChakraConfig({
responsive: { separator: ["orientation"] },
});Props
| Prop | Default | Type |
|---|---|---|
orientation | 'horizontal' | ConditionalValue<'vertical' | 'horizontal' | PresetVariant<'separator', 'orientation'>>Which way the line runs. A **vertical** separator has no height of its own — give it one (`<Separator orientation="vertical" height="4" />`) or let a stretching flex row supply it. |
size | 'sm' | ConditionalValue<'xs' | 'sm' | 'md' | 'lg' | PresetVariant<'separator', 'size'>>How thick the line is, through the `--separator-thickness` custom property the recipe sets. |
variant | 'solid' | ConditionalValue<'solid' | 'dashed' | 'dotted' | PresetVariant<'separator', 'variant'>>The border style of the line. |
Plus Omit<HTMLChakraProps<"span">, "orientation"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.