Divider

Horizontal or vertical separator. Decorative by default (aria-hidden). Pass decorative={false} for a semantic separator.

Features

Supports horizontal and vertical orientation.

Decorative by default with aria-hidden.

Semantic separator mode with role=“separator”.

Example

Horizontal

Item one

Item two

Item three

Vertical

HomeAboutContact

With label

Anatomy


import { Divider } from '@wire-ui/react'
 
{/* Horizontal */}
<div>
<p>Item one</p>
<Divider />
<p>Item two</p>
<Divider />
<p>Item three</p>
</div>
 
{/* Vertical */}
<div>
<span>Home</span>
<Divider orientation="vertical" />
<span>About</span>
<Divider orientation="vertical" />
<span>Contact</span>
</div>
 
{/* With label */}
<div>
<Divider />
<span>OR</span>
<Divider />
</div>

Styling

Divider renders as a simple <div>. Style it with background color and dimensions based on orientation.


{/* Horizontal */}
<Divider className="h-[2px] w-full bg-black" />
 
{/* Vertical */}
<Divider orientation="vertical" className="h-full w-[2px] bg-black" />

Using data attributes

Divider does not expose interactive data attributes. When decorative={false}, it renders with role="separator" and aria-orientation.


/* Style based on orientation */
[role="separator"][aria-orientation="vertical"] {
  width: 2px;
  height: 100%;
}

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Divider direction
`decorative`	`boolean`	`true`	When `true`: `role="none"` + `aria-hidden`. When `false`: `role="separator"` + `aria-orientation`
`...rest`	`HTMLAttributes<HTMLDivElement>`	—	Spread onto the element