Separator

A lightweight divider component for visually separating content sections. Supports horizontal and vertical orientations, three line variants, optional inline labels, and proper ARIA semantics.

Live Preview

See the separator in both horizontal and vertical orientations.

Horizontal

Content above the separator

Content below the separator

Vertical

HomeProductsAboutContact

With Label

Installation

Install the Aidash Components package using your preferred package manager.

$ pnpm add @aidash/components

Import

Import the Separator component into your file.

tsx
import { Separator } from '@/components/aidash/separator';

Usage

The simplest way to use Separator with default props.

First section of content

Second section of content

Basic Usage
tsx
<p>First section of content</p>
<Separator />
<p>Second section of content</p>

Variants

Three line styles for different visual weights and contexts.

Default (solid)

Dashed

Dotted

tsx
1{/* Solid line (default) */}2<Separator />3 4{/* Dashed line */}5<Separator variant="dashed" />6 7{/* Dotted line */}8<Separator variant="dotted" />
Tip
Use default for primary content divisions, dashed for secondary or temporary boundaries, and dotted for subtle, decorative dividers.

Orientations

Horizontal and vertical separators for different layout directions.

Horizontal (default)

Vertical

LeftCenterRight

Vertical with variants

SolidDashedDottedEnd
tsx
1{/* Horizontal (default) */}2<Separator />3 4{/* Vertical — use inside a flex container */}5<div className="flex items-center gap-4 h-8">6<span>Left</span>7<Separator orientation="vertical" />8<span>Center</span>9<Separator orientation="vertical" />10<span>Right</span>11</div>

With Label

Display text in the middle of a horizontal separator for contextual dividers.

Simple Label

Descriptive Label

Dashed with Label

Dotted with Label

tsx
1{/* Simple label */}2<Separator label="OR" />3 4{/* Descriptive label */}5<Separator label="Continue with" />6 7{/* Label with variant */}8<Separator label="Section Break" variant="dashed" />9<Separator label="More Options" variant="dotted" />

Composition

See how Separator integrates with cards, lists, forms, and other layout patterns.

In Cards

Account Settings

Manage your account preferences

Email notifications are enabled.

tsx
1<div className="rounded-xl border overflow-hidden">2<div className="px-5 py-4">3  <h3>Account Settings</h3>4  <p>Manage your account preferences</p>5</div>6<Separator />7<div className="px-5 py-4">8  <p>Email notifications are enabled.</p>9</div>10<Separator />11<div className="px-5 py-3 flex justify-end gap-2">12  <button>Cancel</button>13  <button>Save</button>14</div>15</div>

In Lists

Profile
Notifications
Security
Billing
tsx
1<div className="px-5 py-3">Profile</div>2<Separator className="mx-5" />3<div className="px-5 py-3">Notifications</div>4<Separator className="mx-5" />5<div className="px-5 py-3">Security</div>

In Forms

user@example.com
********
tsx
1<Input label="Email" />2<Input label="Password" type="password" />3<Separator label="OR" />4<Button variant="outline" fullWidth>5Continue with Google6</Button>

Between Sections

General

Basic application settings and preferences.

Advanced

Developer options and experimental features.

Danger Zone

Destructive actions like deleting your account.

tsx
1<div>2<h3>General</h3>3<p>Basic application settings and preferences.</p>4</div>5<Separator variant="dashed" />6<div>7<h3>Advanced</h3>8<p>Developer options and experimental features.</p>9</div>

Accessibility

Built-in accessibility features for inclusive user experiences.

ARIA Separator Role

Uses role="separator" to identify the element as a content divider. Screen readers announce it as a separator in the document structure.

Orientation Support

The aria-orientation attribute is set to match the visual direction, helping assistive technologies understand the layout context.

Decorative Mode

When decorative=true (default), the separator is hidden from the accessibility tree with aria-hidden. Set to false when the separator conveys meaningful structure.

No Focus Trap

Separators are non-interactive and do not receive focus. Keyboard navigation flows naturally past them without any extra tab stops.

tsx
1{/* Decorative separator — hidden from screen readers */}2<Separator />3 4{/* Meaningful separator — announced by screen readers */}5<Separator decorative={false} />6 7{/* Vertical separator with proper orientation */}8<div className="flex items-center gap-4">9<span>Section A</span>10<Separator orientation="vertical" decorative={false} />11<span>Section B</span>12</div>

API Reference

Complete list of props accepted by the Separator component.

Separator
PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction of the separator line
variant'default' | 'dashed' | 'dotted''default'Line style of the separator
labelstring—Optional text displayed in the middle of a horizontal separator
decorativebooleantrueWhen true, adds aria-hidden to remove from accessibility tree
classNamestring''Additional CSS classes
Note
The label prop only takes effect when orientation is 'horizontal'. Vertical separators do not support inline labels.

Examples

Realistic production examples showing separators in context.

Settings Page Dividers

Dark Mode

Toggle between light and dark themes

Notifications

Receive email and push notifications

Two-Factor Auth

Add an extra layer of security

tsx
1<div className="setting-row">2<SettingToggle label="Dark Mode" enabled />3</div>4<Separator />5<div className="setting-row">6<SettingToggle label="Notifications" />7</div>8<Separator />9<div className="setting-row">10<SettingToggle label="Two-Factor Auth" />11</div>

Sidebar Sections

Main

Dashboard
Projects
Tasks

Account

Settings
Billing
Log out
tsx
1<nav className="sidebar">2<SidebarSection title="Main">3  <NavItem active>Dashboard</NavItem>4  <NavItem>Projects</NavItem>5</SidebarSection>6<Separator className="my-3" />7<SidebarSection title="Account">8  <NavItem>Settings</NavItem>9  <NavItem>Billing</NavItem>10</SidebarSection>11<Separator className="my-3" />12<NavItem variant="danger">Log out</NavItem>13</nav>

Content Sections

Introduction

Welcome to the Aidash design system. This guide covers the core principles and components that power our interface.

Getting Started

Install the package, configure your theme tokens, and start building with composable components.

Core Components

Explore buttons, inputs, cards, and more. Each component is designed for accessibility and consistency.

tsx
1<article>2<section>3  <h3>Introduction</h3>4  <p>Welcome to the design system...</p>5</section>6<Separator label="Chapter 1" />7<section>8  <h3>Getting Started</h3>9  <p>Install the package...</p>10</section>11<Separator label="Chapter 2" />12<section>13  <h3>Core Components</h3>14  <p>Explore buttons, inputs, cards...</p>15</section>16</article>

Best Practices

Guidelines for using separators effectively in your interface.

Do
  • Use separators to create visual hierarchy between content groups
  • Keep label text short and descriptive (1-3 words)
  • Use vertical separators in navigation bars and toolbars
  • Set decorative=false when the separator conveys meaningful structure
  • Use inset separators (with className="mx-5") in lists for aligned dividers
  • Combine with spacing (padding/margin) for clear section breaks
Don't
  • Stack multiple separators without content between them
  • Use separators when whitespace alone provides enough visual separation
  • Put long sentences or paragraphs in the label prop
  • Mix different separator variants within the same visual group
  • Use colored or thick separators that compete with content for attention
  • Forget to wrap vertical separators in a flex container with a defined height

Source Code

Full source code for the Separator component.

src/components/aidash/separator.tsx
tsx
export type SeparatorOrientation = 'horizontal' | 'vertical';
export type SeparatorVariant = 'default' | 'dashed' | 'dotted';

export interface SeparatorProps {
  orientation?: SeparatorOrientation;
  decorative?: boolean;
  className?: string;
  label?: string;
  variant?: SeparatorVariant;
}

export function Separator({
  orientation = 'horizontal',
  decorative = true,
  className = '',
  label,
  variant = 'default',
}: SeparatorProps) {
  const ariaProps = {
    role: 'separator' as const,
    'aria-orientation': orientation,
    ...(decorative ? { 'aria-hidden': true as const } : {}),
  };

  /* ── Vertical ── */
  if (orientation === 'vertical') {
    const verticalStyles =
      variant === 'default'
        ? 'w-px bg-(--border)'
        : variant === 'dashed'
          ? 'w-0 border-l border-dashed border-(--border)'
          : 'w-0 border-l border-dotted border-(--border)';

    return (
      <div
        {...ariaProps}
        className={`self-stretch ${verticalStyles} ${className}`}
      />
    );
  }

  /* ── Horizontal with label ── */
  if (label) {
    const lineStyles =
      variant === 'default'
        ? 'flex-1 h-px bg-(--border)'
        : variant === 'dashed'
          ? 'flex-1 h-0 border-t border-dashed border-(--border)'
          : 'flex-1 h-0 border-t border-dotted border-(--border)';

    return (
      <div
        {...ariaProps}
        className={`flex items-center w-full ${className}`}
      >
        <div className={lineStyles} />
        <span className="text-xs text-(--text-muted) px-3 whitespace-nowrap select-none">
          {label}
        </span>
        <div className={lineStyles} />
      </div>
    );
  }

  /* ── Horizontal (plain) ── */
  const horizontalStyles =
    variant === 'default'
      ? 'h-px w-full bg-(--border)'
      : variant === 'dashed'
        ? 'h-0 w-full border-t border-dashed border-(--border)'
        : 'h-0 w-full border-t border-dotted border-(--border)';

  return (
    <div
      {...ariaProps}
      className={`${horizontalStyles} ${className}`}
    />
  );
}

Related

Other components that work well alongside Separator.

Card

Container component with sections that pair naturally with separators.

Accordion

Collapsible content sections with built-in dividers between items.