Separator

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

Status
beta
Version
0.2.7
Sources
Abstract
Install
yarn add @twilio-paste/separator — or — yarn add @twilio-paste/core

Guidelines#

About Separator#

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.

Examples#

Horizontal separator#

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.


Vertical separator#

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.

Option 1
Option 2
Option 3
Option 4
Option 5

Spacing#

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#

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.

Option 1
Option 2

Option 1
Option 2

When to use the Separator#

Page content separation#

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.

Component separation#

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


Usage guide#

API#

Installation#

yarn add @twilio-paste/separator - or - yarn add @twilio-paste/core

Usage#

import {Separator} from '@twilio-paste/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

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.