Separator

bo-separator marks a boundary between content. It is decorative by default, so it is hidden from assistive technology unless you set decorative="false".

Horizontal Separator

Section one

Section two

<div class="grid gap-3"><span>Section one</span><bo-separator /><span>Section two</span></div>

Orientation and Label

orientation accepts horizontal and vertical. A label places visible text at the center of the separator.

Navigation

or

Settings

<div class="flex items-center gap-4"><span>Navigation</span><bo-separator orientation="vertical" label="or" /><span>Settings</span></div>

API Reference

Prop	Type	Default	Description
id	string	Autogenerated	Element id.
dataTestId	string	Autogenerated	Test id.
orientation	'horizontal' | 'vertical'	horizontal	Separator direction.
decorative	boolean	true	Hides the separator from assistive technology.
label	string	-	Visible centered label.
role	HTMLAttributes['role']	-	Optional ARIA role.
ariaLabel	string	-	Accessible label.