A visual separator between content sections, with orientation, variant, and inset control.

Divider separates content into distinct groups. It renders a native <hr> for horizontal use (semantic by default) or a <div role="separator"> for vertical layouts.

Section A

Section B

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';
import { Divider } from '@infinitibit_gmbh/ui';

<Divider />

Orientation

Pass orientation="vertical" for an inline separator. The element automatically switches to <div role="separator" aria-orientation="vertical">.

Left

Center

Right

<Divider orientation="horizontal" /> {/* default — <hr> */}
<Divider orientation="vertical" />   {/* <div role="separator" aria-orientation="vertical"> */}

Variant

solid (default) renders a 1 px line using the --ib-color-divider-default token — a translucent ink (black at 15 % in light, white at 20 % in dark) so it blends onto any surface and stays visible in both themes. gradient fades the line transparent on both ends — useful for decorative section breaks.

Solid

Gradient

End

<Divider variant="solid" />
<Divider variant="gradient" />

Inset

Control leading or symmetric margin using the inset prop (amount: 16 px = --ib-space-4):

full

inset

middle

Value	Effect
`"full"`	No margin (default)
`"inset"`	`margin-inline-start: 16px` (leading side)
`"middle"`	`margin-inline: 16px` (both sides symmetric)

<Divider inset="full" />
<Divider inset="inset" />
<Divider inset="middle" />

Decorative

Set decorative to hide the separator from assistive technology when it carries no semantic meaning (e.g. a purely visual gradient break between hero sections).

<Divider decorative />
{/* renders <div aria-hidden="true"> — invisible to screen readers */}

API

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout axis.
`variant`	`'solid' \| 'gradient'`	`'solid'`	Line style.
`inset`	`'full' \| 'inset' \| 'middle'`	`'full'`	Side margin.
`decorative`	`boolean`	`false`	Hides from AT (`aria-hidden="true"`).
`className`	`string`	—	Appended to the CVA class list (escape hatch, no clobber).

Plus all native <hr> attributes (id, style, data-*, …).

Accessibility

Horizontal: <hr> carries role="separator" natively — no extra attributes needed.
Vertical: <div role="separator" aria-orientation="vertical"> is announced correctly by screen readers.
Decorative: aria-hidden="true" removes the element from the accessibility tree. Use when the separator is visual chrome only (no structural meaning).

Divider