Separator

<Box backgroundColor="colorBackgroundBody" padding="space50">
  <Separator orientation="horizontal" verticalSpacing="space50" />
</Box>

The Separator component can be used to create visual and semantic separation between UI elements or sections.

It can be used to create separation between large sections of page content, or between smaller parts of single UI controls such as menu items in a menu.

It composes an <hr /> (horizontal rule) element with an explicit declaration of the separator ARIA role.

It is heavily inspired by the Chakra UI implementation.

Vertical separation can be created by using a horizontal separator. This is achieved by setting orientation="horizontal". A verticalSpacing styling property is provided to let you to create space above and below the separator. verticalSpacing will take any Spacing Token as its value.

<Box backgroundColor="colorBackgroundBody" padding="space50">
  <Separator orientation="horizontal" verticalSpacing="space50" />
</Box>

Horizontal separation can be created by using a vertical separator. This is achieved by setting orientation="vertical". A horizontalSpacing styling property is provided to let you to create space on either side of the separator. horizontalSpacing will take any Spacing Token as its value.

<Box backgroundColor="colorBackgroundBody" padding="space50" display="flex">
  <Text as="span">Option 1</Text>
  <Separator orientation="vertical" horizontalSpacing="space40" />
  <Text as="span">Option 2</Text>
  <Separator orientation="vertical" horizontalSpacing="space40" />
  <Text as="span">Option 3</Text>
  <Separator orientation="vertical" horizontalSpacing="space40" />
  <Text as="span">Option 4</Text>
  <Separator orientation="vertical" horizontalSpacing="space40" />
  <Text as="span">Option 5</Text>
</Box>

The Separator comes with 2 spacing properties: horizontalSpacing and verticalSpacing. You can use these properties to create space between the Separator and the two pieces of UI it sits between.

When used, the spacing properties create equal space in both directions along the orientation you choose.

horizontalSpacing and verticalSpacing are responsive props. You can provide them an array of spacing values to change the spacing based on the screen sizes supported by your theme.

<Box backgroundColor="colorBackgroundBody" padding="space50">
  <Box display="flex">
    <Text as="span">Option 1</Text>
    <Separator orientation="vertical" horizontalSpacing="space80" />
    <Text as="span">Option 2</Text>
  </Box>
  <Separator orientation="horizontal" verticalSpacing="space80" />
  <Box display="flex">
    <Text as="span">Option 1</Text>
    <Separator orientation="vertical" horizontalSpacing="space80" />
    <Text as="span">Option 2</Text>
  </Box>
</Box>

A Separator can be used to create visual and semantic separation between two parts of a page or within page content. It can also be useful in creating hierarchy within a page.

The most common use case closely reflects the HTML <hr /> (horizontal rule) element. The HTML specification describes a horizontal rule as representing a "thematic break" within a section of a page. You can use it as a transition to another topic or represent that 2 things in the same section are not directly related.

It should not be used as a substitute for styled semantic sectioning HTML. For example, borders on modal headers or sidebars.

A Separator can also be used as an element inside components. For example, it can be used inside a menu to create separation between a set of menu items, effectly creating groups of menu items.