Visually or semantically separates content.
import React from 'react';import * as Separator from '@radix-ui/react-separator';import './styles.css';const SeparatorDemo = () => (<div style={{ width: '100%', maxWidth: 300, margin: '0 15px' }}><div className="Text" style={{ fontWeight: 500 }}>Radix Primitives</div><div className="Text">An open-source UI component library.</div><Separator.Root className="SeparatorRoot" style={{ margin: '15px 0' }} /><div style={{ display: 'flex', height: 20, alignItems: 'center' }}><div className="Text">Blog</div><Separator.Root className="SeparatorRoot" decorative orientation="vertical" style={{ margin: '0 15px' }} /><div className="Text">Docs</div><Separator.Root className="SeparatorRoot" decorative orientation="vertical" style={{ margin: '0 15px' }} /><div className="Text">Source</div></div></div>);export default SeparatorDemo;
Supports horizontal and vertical orientations.
Install the component from your command line.
npm install @radix-ui/react-separator
Import all parts and piece them together.
import * as Separator from '@radix-ui/react-separator';
export default () => <Separator.Root />;
The separator.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
orientation | enum | "horizontal" |
decorative | boolean |
Data attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
Adheres to the separator
role requirements.