First
Second
Third
<div>
<Text>First</Text>
<Separator />
<Text>Second</Text>
<Separator />
<Text>Third</Text>
</div>Examples
Variants
Use the variant prop to change the appearance of the separator.
<div className="flex flex-col gap-2">
<Separator variant="solid" />
<Separator variant="dashed" />
<Separator variant="dotted" />
</div>Sizes
Use the size prop to change the size of the separator.
<div className="flex flex-col gap-2">
<Separator size="xs" />
<Separator size="sm" />
<Separator size="md" />
<Separator size="lg" />
</div>Label
Use the label prop to add a label to the separator.
Label (start)
Label (end)
Label (center)
<div className="flex flex-col gap-2">
<Separator label="Label (start)" labelPlacement="start" />
<Separator label="Label (end)" labelPlacement="end" />
<Separator label="Label (center)" labelPlacement="center" />
</div>Vertical
Use the orientation prop to change the orientation of the separator.
First
Second
<div className="flex items-center gap-2">
<Text>First</Text>
<Separator orientation="vertical" className="h-4" />
<Text>Second</Text>
</div>Color
Use the colorPalette prop to change the color of the separator.
gray
orange
teal
green
red
<div className="grid grid-cols-[8ch_1fr] items-center gap-y-2">
<Text>gray</Text>
<Separator colorPalette="gray" size="lg" />
<Text>orange</Text>
<Separator colorPalette="orange" size="lg" />
<Text>teal</Text>
<Separator colorPalette="teal" size="lg" />
<Text>green</Text>
<Separator colorPalette="green" size="lg" />
<Text>red</Text>
<Separator colorPalette="red" size="lg" />
</div>