Skip to main content

​
Usage

The Divider component creates a visual separator between content sections. It supports both horizontal and vertical orientations, and can optionally display a label. 
import { Divider } from '@kivora/react';

<Divider />

​
Examples

​
Basic Divider

<div>
  <p>Content above</p>
  <Divider />
  <p>Content below</p>
</div>

​
With Label

<div>
  <button>Sign in with Google</button>
  <Divider label="or continue with" />
  <button>Sign in with Email</button>
</div>

​
Vertical Divider

<div className="flex items-center gap-4">
  <button>Home</button>
  <Divider orientation="vertical" className="h-6" />
  <button>About</button>
  <Divider orientation="vertical" className="h-6" />
  <button>Contact</button>
</div>

​
Props

​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the divider. Use vertical inside flex containers.
​
label
string
Optional text label displayed in the center of a horizontal divider.
​
className
string
Additional CSS classes to apply to the divider.

​
Accessibility

  • Uses the semantic role="separator" attribute
  • Includes appropriate aria-orientation for screen readers
  • Horizontal dividers without labels render as <hr> elements

Build docs developers (and LLMs) love

Get started for freeTalk to us