Brand
Changelog v1.4

Brand Divider

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

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 style="display: flex; gap: 0.5rem;">
  <span>Left</span>
  <brand-divider vertical></brand-divider>
  <span>Right</span>
</div>