Documentation Index
Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
Use this file to discover all available pages before exploring further.
Separator
The Separator component provides a visual and semantic divider between sections of content. It’s accessible to screen readers and supports both horizontal and vertical orientations.
Import
import { Separator } from '@base-ui/react/separator';
Basic Usage
function MyComponent() {
return (
<div>
<p>Content above</p>
<Separator />
<p>Content below</p>
</div>
);
}
Key Features
- Accessible: Uses the ARIA separator role for screen readers
- Flexible orientation: Supports horizontal and vertical layouts
- Semantic HTML: Properly announces content divisions to assistive technologies
- Unstyled: Complete control over visual appearance
Component Props
Separator
A semantic separator element.
Props:
orientation (string): The orientation of the separator. Either ‘horizontal’ or ‘vertical’ (default: ‘horizontal’)- Renders a
<div> element with role=“separator”
- Accepts all standard HTML div attributes
State:
orientation: The current orientation of the separator
Styling
<div>
<p>Section 1</p>
<Separator className="separator" />
<p>Section 2</p>
</div>
.separator {
border: none;
background-color: #e5e7eb;
height: 1px;
margin: 1rem 0;
}
.separator[aria-orientation="vertical"] {
width: 1px;
height: auto;
margin: 0 1rem;
}
<div>
<p>Section 1</p>
<Separator className="h-px bg-gray-200 my-4" />
<p>Section 2</p>
</div>
Common Patterns
Horizontal Separator
The default orientation:
<div>
<section>
<h2>About</h2>
<p>Content here...</p>
</section>
<Separator orientation="horizontal" />
<section>
<h2>Services</h2>
<p>Content here...</p>
</section>
</div>
Vertical Separator
Useful for dividing content side-by-side:
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<button>Button 1</button>
<Separator orientation="vertical" style={{ height: '24px' }} />
<button>Button 2</button>
<Separator orientation="vertical" style={{ height: '24px' }} />
<button>Button 3</button>
</div>
Styled Separator
function StyledSeparator() {
return (
<Separator
style={{
height: '2px',
background: 'linear-gradient(to right, transparent, #3b82f6, transparent)',
border: 'none',
margin: '2rem 0',
}}
/>
);
}
With Text Label
function SeparatorWithLabel({ children }) {
return (
<div
role="presentation"
style={{
display: 'flex',
alignItems: 'center',
gap: '1rem',
margin: '1.5rem 0',
}}
>
<Separator style={{ flex: 1 }} />
<span style={{ fontSize: '0.875rem', color: '#6b7280' }}>
{children}
</span>
<Separator style={{ flex: 1 }} />
</div>
);
}
// Usage
<SeparatorWithLabel>OR</SeparatorWithLabel>
In Navigation
function Navigation() {
return (
<nav style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<a href="/">Home</a>
<Separator orientation="vertical" style={{ height: '20px' }} />
<a href="/about">About</a>
<Separator orientation="vertical" style={{ height: '20px' }} />
<a href="/contact">Contact</a>
</nav>
);
}
In Lists
function ItemList({ items }) {
return (
<div>
{items.map((item, index) => (
<React.Fragment key={item.id}>
<div style={{ padding: '1rem' }}>
<h3>{item.title}</h3>
<p>{item.description}</p>
</div>
{index < items.length - 1 && <Separator />}
</React.Fragment>
))}
</div>
);
}
Decorative Separator
<Separator
style={{
height: '4px',
background: 'repeating-linear-gradient(' +
'90deg, ' +
'#3b82f6, ' +
'#3b82f6 10px, ' +
'transparent 10px, ' +
'transparent 20px' +
')',
border: 'none',
margin: '2rem 0',
}}
/>
Toolbar Separator
function Toolbar() {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
padding: '0.5rem',
backgroundColor: '#f3f4f6',
borderRadius: '0.5rem',
}}
>
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
<Separator
orientation="vertical"
style={{
height: '24px',
width: '1px',
backgroundColor: '#d1d5db',
margin: '0 0.25rem',
}}
/>
<button>Link</button>
<button>Image</button>
</div>
);
}