---
outline: deep
---

# Divider

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

**`<l-divider>`** — Custom Element (no Shadow DOM)

## Options

### Horizontal

Default orientation. Spans the full width of its container.

```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.

```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`.

```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.

```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
- **Orientation** — Automatically sets aria-orientation=vertical when orientation is vertical
- **Color** — Divider color meets non-text contrast minimum against adjacent surfaces

## API reference

### Importing

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

```js
import 'luxen-ui/divider';
```

### Attributes & Properties

- **orientation**: `DividerOrientation` (default: `'horizontal'`) — The divider's orientation.
- **label**: `string | undefined` — Optional text label displayed over the divider line.

### CSS custom properties

- `--color` — The color of the divider line.
- `--thickness` — The thickness of the divider line.
- `--spacing` — The spacing between the divider and its neighboring elements.