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

⬡Progressive

◇Plain

⬢Shadow-DOM

Plain Custom Element

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-secondary text-sm">Section one content goes here.</p>
  <l-divider></l-divider>
  <p class="text-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-secondary text-sm">Home</span>
  <l-divider orientation="vertical"></l-divider>
  <span class="text-secondary text-sm">Settings</span>
  <l-divider orientation="vertical"></l-divider>
  <span class="text-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-secondary text-sm">Thin (default)</p>
  <l-divider></l-divider>
  <p class="text-secondary text-sm">Medium</p>
  <l-divider style="--thickness: 2px"></l-divider>
  <p class="text-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-secondary text-sm">Sign in with your email.</p>
  <l-divider label="OR"></l-divider>
  <p class="text-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

orientationDividerOrientationdefault:'horizontal'Property

The divider's orientation.

labelstring | undefinedProperty

Optional text label displayed over the divider line.

CSS custom properties

--colorCustom property

The color of the divider line.

--thicknessCustom property

The thickness of the divider line.

--spacingCustom property

The spacing between the divider and its neighboring elements.