Skip to contentSkip to navigationSkip to topbar
Figma
Star

Separator

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

Version 8.1.1
Github

Installation

Installation page anchor
yarn add @twilio-paste/separator - or - yarn add @twilio-paste/core
import { Separator } from "@twilio-paste/core/separator";

const Component = () => <Separator orientation="horizontal" />;

Separator

Separator page anchor

orientation RequiredRequired

Separator direction

Type
Orientation

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SEPARATOR

horizontalSpacing

Space left and right of the separator when orientation is vertical

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

id

Type
never

verticalSpacing

Space top and bottom of the separator when orientation is horizontal

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }