Separator

A hairline that divides content, horizontal or vertical.

Horizontal

buena mono ships with a fixed 618-unit cell.

mrkdwn renders it without reflowing a single glyph.

<p>buena mono ships with a fixed 618-unit cell.</p>
<Separator className="my-4" />
<p>mrkdwn renders it without reflowing a single glyph.</p>

Vertical

Docs

Changelog

License

List

Weight618

Ligatureson

Cell widthfixed

<div>
  <div className="flex justify-between"><span>Weight</span><span>618</span></div>
  <Separator className="my-2" />
  <div className="flex justify-between"><span>Cell</span><span>fixed</span></div>
</div>

Horizontal separators between list items keep related rows visually grouped.

Custom styling

mrkdwn

buena mono

{/* Colour + thickness via className */}
<Separator className="bg-accent" />
<Separator className="h-0.5 bg-success" />
<Separator orientation="vertical" className="w-0.5 bg-error" />

Custom styling: override colour with bg-* and thickness with h-* / w-* through className.

Accessibility variants: the separator renders role="separator" with aria-orientation so assistive tech announces the boundary (semantic). For a purely decorative divider that should be ignored, add aria-hidden.

Markdown for agents: /design/separator.md · spec: /design.md