Skip to content
Vy logo
Components

Separator

Separators, or dividing lines, are used to separate different sections or parts of content from each other.

Examples

A simple separator

<Separator />

Different Sizes

<Stack spacing={3}>
  <Separator size="sm" />
  <Separator size="md" />
  <Separator size="lg" />

  <Separator size="sm" variant="dashed" />
  <Separator size="md" variant="dashed" />
  <Separator size="lg" variant="dashed" />
</Stack>

Different Variants

<Stack spacing={3}>
  <Separator variant="solid" />
  <Separator variant="dashed" />
</Stack>

A Vertical Separator

<Center height="5rem" gap="3">
  <Separator orientation="vertical" />
  <Separator orientation="vertical" variant="dashed" />
</Center>

A responsive Separator

<Center display="flex" gap="2" flexDirection={{mdDown: "column", md: "row"}} height="5rem">
  1
  <Separator variant="dashed" orientation={{mdDown: "horizontal", md: "vertical"}} />
  2
</Center>;