Divider <l-divider>

Dividers are used to visually separate groups of content with a horizontal or vertical line. They can include an optional text label.

HTML tag<l-divider>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element (no Shadow DOM)

Options

Horizontal

Default orientation. Spans the full width of its container.

Section one content goes here.

Section two content goes here.

Code

HTML

<div class="flex flex-col gap-0">
  <p class="text-color-secondary text-sm">Section one content goes here.</p>
  <l-divider></l-divider>
  <p class="text-color-secondary text-sm">Section two content goes here.</p>
</div>

Vertical

Set orientation="vertical". The divider inherits the height of its parent container.

Home Settings Profile

Code

HTML

<div class="flex items-center gap-0 h-8">
  <span class="text-color-secondary text-sm">Home</span>
  <l-divider orientation="vertical"></l-divider>
  <span class="text-color-secondary text-sm">Settings</span>
  <l-divider orientation="vertical"></l-divider>
  <span class="text-color-secondary text-sm">Profile</span>
</div>

Thickness

Set --thickness to control thickness. Default is 1px.

Thin (default)

Medium

Thick

Code

HTML

<div class="flex flex-col gap-0">
  <p class="text-color-secondary text-sm">Thin (default)</p>
  <l-divider></l-divider>
  <p class="text-color-secondary text-sm">Medium</p>
  <l-divider style="--thickness: 2px"></l-divider>
  <p class="text-color-secondary text-sm">Thick</p>
  <l-divider style="--thickness: 4px"></l-divider>
</div>

With text

Add a label attribute. The text renders over the divider line.

Sign in with your email.

Continue with a social account.

Code

HTML

<div class="flex flex-col gap-0">
  <p class="text-color-secondary text-sm">Sign in with your email.</p>
  <l-divider label="OR"></l-divider>
  <p class="text-color-secondary text-sm">Continue with a social account.</p>
</div>

Accessibility

Criteria

Role

Automatically sets role=separator in connectedCallback

WCAG1.3.1

RGAA9.1

Orientation

Automatically sets aria-orientation=vertical when orientation is vertical

WCAG1.3.1

Color

Divider color meets non-text contrast minimum against adjacent surfaces

WCAG1.4.11

RGAA3.2

API reference

Importing

CSS

@import 'luxen-ui/css/divider';

JS

import 'luxen-ui/divider';

Attributes & Properties

orientationAttribute

horizontal (default) · vertical

labelAttribute

Optional text label displayed over the divider line

CSS custom properties

--colorName

Divider line color (default: --l-color-divider)

--thicknessName

Divider thickness (default: 1px)

--spacingName

Margin around the divider (default: --spacing-4)