Divider

Dividers separate content into clear groups with optional labels, icons, or buttons.

Import


import { Divider } from "@raydenui/ui";

Usage

Basic

Preview


<Divider />

With Label

Preview


<Divider label="Or continue with" />

With Title

Preview

Section Title


<Divider variant="with-title" label="Section Title" />

With Icon

Preview


import { Icon } from "@raydenui/ui";
 
<Divider variant="with-icon" icon={<Icon name="stars" />} />

With Button

Preview


<Divider
  variant="with-button"
  buttonLabel="Load More"
  onButtonClick={() => loadMore()}
/>

Vertical Orientation

Preview

Item 1

Item 2

Item 3


<div className="flex items-center h-8 gap-4">
  <span>Item 1</span>
  <div className="h-full w-px bg-grey-100" role="separator" aria-orientation="vertical" />
  <span>Item 2</span>
  <div className="h-full w-px bg-grey-100" role="separator" aria-orientation="vertical" />
  <span>Item 3</span>
</div>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "with-label" \| "with-icon" \| "with-title" \| "with-button"`	`"default"`	Divider variant
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Orientation
`label`	`string`	—	Label text (with-label variant)
`title`	`string`	—	Title text (with-title variant)
`icon`	`ReactNode`	—	Icon (with-icon variant)
`buttonText`	`string`	—	Button text (with-button variant)
`onButtonClick`	`() => void`	—	Button click handler
`className`	`string`	—	Additional CSS classes

Accessibility

Uses role="separator" for semantic meaning
Orientation communicated via aria-orientation
Button variant is keyboard accessible