Skip to main content

​
Overview

Section A
Section B
Item 1
Item 2
Item 3
Separator renders a thin <hr> or <div> line to visually separate content sections. It can be horizontal (default) or vertical, and decorative (hidden from screen readers) or semantic.

​
Installation

npm install @araf-ds/core

​
Usage

import { Separator } from "@araf-ds/core"

export default function Example() {
  return (
    <div>
      <p>Section A</p>
      <Separator />
      <p>Section B</p>
    </div>
  )
}

​
Variants

​
Horizontal (Default)

Typography
A collection of font styles used across the design system.
Spacing
Base-4 spacing scale from 4px to 96px.
<div>
  <div>
    <h4>Typography</h4>
    <p>A collection of font styles used across the design system.</p>
  </div>
  <Separator />
  <div>
    <h4>Spacing</h4>
    <p>Base-4 spacing scale from 4px to 96px.</p>
  </div>
</div>

​
Vertical

Blog
Docs
Source
<div className="flex items-center gap-4 h-5">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

​
With Label (“OR” divider)

OR
<div className="flex flex-col gap-4">
  <Button>Continue with Google</Button>
  <div className="flex items-center gap-3">
    <Separator className="flex-1" />
    <span className="text-xs text-muted-foreground font-medium">OR</span>
    <Separator className="flex-1" />
  </div>
  <Button variant="outline">Sign in with email</Button>
</div>

​
API Reference

​
orientation
string
default:"horizontal"
Direction of the line. Values: horizontal · vertical
​
decorative
boolean
default:"true"
When true, the separator is hidden from screen readers (aria-hidden="true"). Set to false when the separator has semantic meaning (e.g. separating distinct content sections).
​
className
string
Additional class names for custom color, thickness, or spacing.

​
Accessibility

  • Decorative separators (decorative={true}) render with aria-hidden="true" — screen readers skip them
  • Semantic separators (decorative={false}) render as <hr role="separator"> — screen readers announce the division
  • Vertical separators inside flex containers must have an explicit height set via className or style

​
Do’s & Don’ts

Do

  • Use orientation="vertical" inside flex rows (nav links, breadcrumbs, toolbars)
  • Use decorative={false} when separating distinct, non-obvious content sections
  • Combine with a label (“OR”, “AND”) for auth flows or filter sections
  • Use consistent spacing (my-4 or my-6) above and below separators

Don't

  • Don’t overuse separators — too many creates visual noise
  • Don’t use Separator as a border replacement for cards or panels
  • Don’t forget to set height for vertical separators — they won’t show without it
  • Don’t use a <hr> directly — use this component to ensure correct ARIA attributes