Skip to content
Change the site theme
(information)

Separator

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


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.

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.

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.

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


yarn add @twilio-paste/separator - or - yarn add @twilio-paste/core
import {Separator} from '@twilio-paste/core/separator';
const Component = () => <Separator orientation="horizontal" />;

All the regular HTML attributes (role, aria-*, type, and so on) including the following custom props:

PropTypeDescriptionDefault
orientation?'horizontal', 'vertical'Separator direction
horizontalSpacing?ResponsiveValue<Spacing>Space left and right of the separator
verticalSpacing?ResponsiveValue<Spacing>Space top and bottom of the separator
element?stringOverrides the default element name to apply unique styles with the Customization Provider'SEPARATOR'

Black lives matter.