---
title: Divider
description: Horizontal or vertical divider with optional label
visibility: guest
draft: false
---

# Divider

A visual separator between content sections. Supports horizontal and vertical orientation, variants, and an optional inline label.

## Basic Usage

:::preview{title="Horizontal divider"}
<x-wirekit::stack gap="md">
    <x-wirekit::card><x-wirekit::card.body>Above</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::divider />
    <x-wirekit::card><x-wirekit::card.body>Below</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

## With Label

Center a text label within the divider line.

:::preview{title="Divider with label"}
<x-wirekit::stack gap="md">
    <x-wirekit::card><x-wirekit::card.body>Section one</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::divider label="OR" />
    <x-wirekit::card><x-wirekit::card.body>Section two</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

## Vertical Orientation

Use inside a [Row](/components/row) to separate items horizontally.

:::preview{title="Vertical divider in a row"}
<x-wirekit::row gap="md" style="align-items: stretch;">
    <x-wirekit::card><x-wirekit::card.body>Left</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::divider orientation="vertical" />
    <x-wirekit::card><x-wirekit::card.body>Right</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::row>
:::

## Variants

:::preview{title="Default variant"}
<x-wirekit::stack gap="md">
    <x-wirekit::card><x-wirekit::card.body>Content</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::divider variant="default" />
    <x-wirekit::card><x-wirekit::card.body>Content</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

:::preview{title="Subtle variant"}
<x-wirekit::stack gap="md">
    <x-wirekit::card><x-wirekit::card.body>Content</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::divider variant="subtle" />
    <x-wirekit::card><x-wirekit::card.body>Content</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

:::preview{title="Bold variant"}
<x-wirekit::stack gap="md">
    <x-wirekit::card><x-wirekit::card.body>Content</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::divider variant="bold" />
    <x-wirekit::card><x-wirekit::card.body>Content</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | string | `'horizontal'` | `horizontal` or `vertical` |
| `variant` | string | `'default'` | `default`, `subtle`, `bold` |
| `label` | string\|null | `null` | Centered text label (horizontal only) |
| `scope` | string\|null | `null` | Scoped personalization name |

## Accessibility

The divider renders with `role="separator"`. Vertical dividers include `aria-orientation="vertical"`. Horizontal dividers without a label render as `<hr>` elements for semantic correctness.

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

## Design Tokens

| Token | Used for |
| --- | --- |
| `--color-wk-border` | Default border color |
| `--color-wk-border-subtle` | Subtle variant |
| `--color-wk-border-strong` | Bold variant |
| `--color-wk-text-muted` | Label text color |
| `--text-wk-sm` | Label font size |

## Usage & Conventions

> **Prop conventions** — this component uses one or more of the shared semantic prop names (`intent` / `variant` / `tone` / `surface`). See [Prop naming conventions](/extending/prop-naming-conventions) for the canonical vocabulary, alias matrix, and decision tree.