Separator

Separators are used to separate page sections or UI elements. They take the width of their parent container.

Code

Usage

import { Separator } from "@twilio-labs/match/components";
const Component = () => <Separator />;

Props

PropTypeDefaultDescription
variant?SeparatorVariant'primary''primary', 'inverse'

Also supports margin props.


Guidelines

About Separators

The separator can be used to help visually divide small elements, such as menu items, or larger items like two sections of a page.

Accessibility

Note: The plain divider in gray20 is not color contrast accessible and is intended for visual embellishment. Use it paired with white space to create enough visual space between elements.


Examples

Primary

The primary separator is the default and should be used on light or white backgrounds.

Inverse

The inverse separator should be used on dark colored backgrounds.