Divider

Divider draws the paired dark/light rule used to separate Windows 98 control groups.

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Chooses the rule direction.
`className`	`string`	-	Adds sizing or layout classes.

Examples

Horizontal and vertical rules

General settings

Left pane

Right pane

import { Divider } from '@murasaki/react98'
 
export function DividerBasicDemo(): React.ReactElement {
  return (
    <div className="flex flex-col gap-3 text-(--button-text) w-64">
      <div>General settings</div>
      <Divider />
      <div className="flex h-12 items-stretch gap-3">
        <span>Left pane</span>
        <Divider orientation="vertical" />
        <span>Right pane</span>
      </div>
    </div>
  )
}

ARIA

Divider is decorative by default. Add role="separator" yourself when the divider communicates document structure.

Keyboard

Divider is not focusable by default and has no keyboard behavior.

SSR

Divider has no client state and renders stable markup.