Separator

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>;

Separators, or dividing lines, should be visible in a layout but not distracting. They should have a clear function in the design and act as a connection between content.

Separators should only be used when content cannot be separated using "white space." This might be due to large amounts of similar content, the need to compress the design, or to differentiate between different types of content. However, the first choice should always be "white space."

Separators should be used as sparingly as possible. They should separate groups rather than individual elements. In some contexts, it may be more necessary to distinguish content than in others.

Full Width
Full-width separators are used to divide content into distinct sections, for example, to separate lists in a table. They are used to indicate the end of an element or to show that an object/page can expand.

Dynamic
A dynamic separator adjusts to the width of the elements or objects it divides. In most cases, a dynamic width is required.

Dashed
An alternative to a solid line is a dashed line. This is primarily used for tickets, travel details, or travel searches. A dashed line serves as a design element, referencing old perforated tickets that could be torn.