Separator
The Separator is a divider that separates and distinguishes sections of content or groups of menu items.
'use client';
import * as React from 'react';
import { Separator } from '@base_ui/react/Separator';
import { styled } from '@mui/system';
export default function SeparatorIntroduction() {
return (
<div>
<Link href=".">Previous</Link>
<StyledSeparator />
<Link href=".">Next</Link>
</div>
);
}
const StyledSeparator = styled(Separator.Root)`
display: inline-block;
height: 16px;
width: 1px;
background-color: #ccc;
margin: 0 12px;
vertical-align: middle;
`;
const Link = styled('a')`
all: unset;
position: relative;
display: inline-block;
padding: 8px;
background: 1px solid #ddd;
cursor: pointer;
`;
Installation
Base UI components are all available as a single package.
npm install @base_ui/react
Once you have the package installed, import the component.
import { Separator } from '@base_ui/react/Separator';
Anatomy
The Separator component is implemented using a single component: <Separator.Root />.
<Separator.Root />Overriding default components
Use the render prop to override the rendered elements with your own components.
// Element shorthand
<Separator.Root render={<hr />} />// Function
<Separator.Root render={(props) => <hr {...props} />} />API Reference
SeparatorRoot
| Prop | Type | Default | Description |
|---|---|---|---|
className | union | Class names applied to the element or a function that returns them based on the component's state. | |
render | union | A function to customize rendering of the component. |