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

Tab Title
Tab Title

<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>

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',
  }}
/>

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>
  );
}

Getting Started

Handbook

Inputs

Data Display

Navigation

Overlays

Forms

Layout

Utilities

Separator

Separator

Import

Basic Usage

Key Features

Component Props

Separator

Styling

Common Patterns

Horizontal Separator

Vertical Separator

Styled Separator

With Text Label

In Navigation

In Lists

Decorative Separator

​Separator

​Import

​Basic Usage

​Key Features

​Component Props

​Separator

​Styling

​Common Patterns

​Horizontal Separator

​Vertical Separator

​Styled Separator

​With Text Label

​In Navigation

​In Lists

​Decorative Separator

​Toolbar Separator

Separator

Import

Basic Usage

Key Features

Component Props

Separator

Styling

Common Patterns

Horizontal Separator

Vertical Separator

Styled Separator

With Text Label

In Navigation

In Lists

Decorative Separator

Toolbar Separator