Separator

A thin visual divider for separating content. Supports horizontal and vertical orientations. By default it's decorative, but you can expose it to assistive tech with decorative={false}.

Installation

npm install @bloomkit/react

Usage

import { Separator } from "@bloomkit/react";
 
<p>Above the line</p>
<Separator />
<p>Below the line</p>

Vertical

Pair a vertical separator with a fixed-height parent:

<div className="flex items-center gap-4 h-10">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

Non-decorative

Set decorative={false} when the separator is semantically meaningful — it will expose role="separator" to screen readers.

<Separator decorative={false} />

Props