Separator

Visually or semantically separates content.

HarmonyUI

An open-source UI component library for Symfony.

Docs

Components

Source

<div>
    <div class="space-y-1">
        <h4 class="text-sm leading-none font-medium">HarmonyUI</h4>
        <p class="text-sm text-neutral-500 dark:text-neutral-400">
            An open-source UI component library for Symfony.
        </p>
    </div>
    <twig:ui:Separator class="my-4" />
    <div class="flex h-5 items-center gap-4 text-sm">
        <div>Docs</div>
        <twig:ui:Separator orientation="vertical" />
        <div>Components</div>
        <twig:ui:Separator orientation="vertical" />
        <div>Source</div>
    </div>
</div>

Usage

<twig:ui:Separator />

Examples

Vertical

Set orientation="vertical" to render a vertical line. The parent needs an explicit height, since the separator stretches to fill it.

Blog

Docs

Source

<div class="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <twig:ui:Separator orientation="vertical" />
    <div>Docs</div>
    <twig:ui:Separator orientation="vertical" />
    <div>Source</div>
</div>

With text

Place text inside the separator to render a labeled divider, such as the "OR" split in a login form. The line splits into two segments around the label automatically.

<div class="w-full max-w-xs">
    <twig:ui:Separator>OR</twig:ui:Separator>
</div>

Non-decorative

By default the separator is purely visual and hidden from assistive technology. Set :decorative="false" when it marks an actual boundary between sections, so screen readers announce it.

The Separator below is announced to screen readers as it marks a real boundary between two sections, not just a visual line.

Reserve :decorative="false" for cases like this one.

<div>
    <p class="text-sm">
        The Separator below is announced to screen readers as it marks a real
        boundary between two sections, not just a visual line.
    </p>
    <twig:ui:Separator class="my-4" :decorative="false" />
    <p class="text-sm">
        Reserve <code>:decorative="false"</code> for cases like this one.
    </p>
</div>

RTL

Set dir="rtl" on a wrapping element to render the separator for right-to-left languages.

أو

<div dir="rtl" class="w-full max-w-xs">
    <twig:ui:Separator>أو</twig:ui:Separator>
</div>

API Reference

`<twig:ui:Separator>`

Prop	Type	Description
`orientation`	`'horizontal'` \| `'vertical'`	The direction of the line. Defaults to `horizontal`
`decorative`	`bool`	Whether the separator is purely visual. Set to `false` to expose it to assistive technology as a semantic boundary. Defaults to `true`
`as`	`string`	The HTML tag to render. Defaults to `div`

Block	Description
`content`	Optional label rendered between two line segments. Leave empty for a plain line