Component primitive

Brand Divider

<brand-divider> wraps Web Awesome's <wa-divider>. Uses the --semantic-border-subtle token so theme switching is automatic.

<brand-divider>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-divider>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Horizontal (default)

Separates stacked sections of content.

Content below the divider.

With label

Put text in the default slot to render a label inline with the rule; position with align.

Start

Default

End

Variants

Tint the rule (and the label) with a semantic colour.

Default

Neutral

Primary

Secondary

Accent

Success

Warning

Info

Error

Vertical

Separates inline content within a row.

Left

Middle

Right

Vertical with label

Start

Default

End

Usage

import { BrandDivider } from '@brandos/ui';

<brand-divider></brand-divider>

<div class="bos:flex bos:gap-2">
  <span>Left</span>
  <brand-divider vertical></brand-divider>
  <span>Right</span>
</div>