Skip to contentSkip to navigationSkip to topbar
Figma
Star

Separator

Version 8.1.1GithubStorybook

A Separator is a line that creates visual and semantic separation between UI elements or sections.

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

Guidelines

Guidelines page anchor

About Separator

About Separator page anchor

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(link takes you to an external page)) element with an explicit declaration of the separator ARIA role(link takes you to an external page).

It is heavily inspired by the Chakra UI(link takes you to an external page) 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.

Component preview theme
<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.

Component preview theme
<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.

Responsive spacing

Responsive spacing page anchor

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.

Component preview 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>

When to use the Separator

When to use the Separator page anchor

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.

Do

Use to create separation between two elements

Don't

Don't use as a substitute for styled semantic sectioning HTML, like borders on headers or sidebars