Divider

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

Basic Usage

Horizontal divider

Above

Below

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

Divider with label

Section one

Section two

<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 to separate items horizontally.

Vertical divider in a row

Left

Right

<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

Default variant

Content

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

Subtle variant

Content

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

Bold variant

Content

<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 for the canonical vocabulary, alias matrix, and decision tree.

Was this page helpful?

What was missing? (optional)

Voting requires cookies or local storage. What we store