Divider

A horizontal (default) or vertical rule that separates content. An optional centered label turns it into a visual break like the classic "OR" between form sections. A pure layout/structure primitive — no interactive behaviour, no variants, no size scale.

The examples are organised by layer: the class reference is the standalone @oriui/css layer, and the Framework API is the @oriui/vue component. Every example is live — flip its code between HTML (the standalone classes, also your htmx / Astro / Svelte / plain-HTML usage), Vue; HTML is the default.

Classes

A divider is a block class plus an optional modifier and a color utility. The Vue props in Framework API map 1:1 to these. There is no variant or size scale — the line inherits thickness and gap from the surrounding context via --ori-size-gap.

Plain rule

A bare horizontal divider with no label — the most common use: separating sections of a page or a card body.

<div class="ori-divider" role="separator"></div>

<OriDivider />

With label

Pass text to insert a centered label. The block class gains ori-divider_text automatically and the line splits around a <span class="ori-divider__label">.

<div class="ori-divider ori-divider_text" role="separator">
    <span class="ori-divider__label">OR</span>
</div>

<OriDivider text="OR" />

Slot label

The default slot overrides text when you need richer content inside the label — an icon, a badge, or styled text.

<div class="ori-divider ori-divider_text" role="separator">
    <span class="ori-divider__label">Section break</span>
</div>

<OriDivider>Section break</OriDivider>

Colors

An optional color repoints --ori-color to a full semantic role, making the line more prominent. Omit for the default subtle mix.

<!-- swap the color class: ori-color_primary → _secondary / _success / _warn / _danger / _info -->
<div class="ori-divider ori-color_primary" role="separator"></div>

<OriDivider color="primary" />
<OriDivider color="secondary" />
<OriDivider color="success" />
<OriDivider color="warn" />
<OriDivider color="danger" />
<OriDivider color="info" />

A colored label divider:

<div class="ori-divider ori-divider_text ori-color_primary" role="separator">
    <span class="ori-divider__label">Continue with</span>
</div>

<OriDivider text="Continue with" color="primary" />

Vertical

vertical renders a column rule that stretches to the parent's cross-axis height. The parent must be a flex or grid container with a defined height — the divider uses align-self: stretch to fill it. Spacing around the vertical rule comes from margin-inline (driven by --ori-size-gap).

<div style="display: flex; align-items: center; height: 3rem">
    <span>Item one</span>
    <div class="ori-divider ori-divider_vertical" role="separator" aria-orientation="vertical"></div>
    <span>Item two</span>
    <div class="ori-divider ori-divider_vertical" role="separator" aria-orientation="vertical"></div>
    <span>Item three</span>
</div>

<div style="display: flex; align-items: center; height: 3rem">
    <span>Item one</span>
    <OriDivider vertical />
    <span>Item two</span>
    <OriDivider vertical />
    <span>Item three</span>
</div>

Common patterns

A sign-in form with an "OR" break and a toolbar that uses vertical rules between action groups.

<form style="display: flex; flex-direction: column; gap: 1rem; max-width: 22rem">
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button class="ori-button ori-button_fluid ori-variant_fill ori-color_primary">Sign in</button>

    <div class="ori-divider ori-divider_text" role="separator">
        <span class="ori-divider__label">OR</span>
    </div>

    <button class="ori-button ori-button_fluid ori-variant_outline ori-color_primary">Continue with Google</button>
</form>

<!-- sign-in form: email/password block → divider → social login -->
<form style="display: flex; flex-direction: column; gap: 1rem; max-width: 22rem">
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <OriButton text="Sign in" variant="fill" fluid />
    <OriDivider text="OR" />
    <OriButton text="Continue with Google" variant="outline" fluid />
</form>

Accessibility

The accessibility contract holds across every layer — the standalone classes and the Vue component render the same attributes.

• Renders <div role="separator"> — the correct ARIA landmark for a thematic break between content regions.
• aria-orientation="vertical" is set only when vertical is true. For the default horizontal orientation the attribute is omitted (horizontal is the implied default per the ARIA spec).
• The line itself is purely decorative. When a label is present it is plain text inside a <span>; no additional ARIA is needed — the role="separator" communicates structure, not the label.
• The component is not interactive and is never focusable. No keyboard contract applies.

Framework API

The props, events, and slots of the Vue component. The standalone CSS layer has no component API — its surface is the classes above. (Svelte bindings are planned.)

Props

ThemeColor: 'primary' | 'secondary' | 'success' | 'warn' | 'danger' | 'info' | 'surface' | 'background'

Events & attributes

OriDivider declares no custom events and does not set inheritAttrs: false, so any extra attributes you pass (class, style, data-*, …) fall through to the root <div role="separator">.

Slots