Separator

Neo-brutalist visual separator supporting horizontal and vertical orientations.

Demo

Preview

水平分隔线

上方内容

下方内容

垂直分隔线

左侧

中间

右侧

变体

尺寸

文字分隔线

章节标题

主色标题

Installation

pnpm dlx brutx-vue@latest add separator

Usage

<script setup>
import { Separator } from 'brutx-ui-vue'
</script>

<template>
    <div>
        <p class="text-sm font-medium">Content above</p>
        <Separator />
        <p class="text-sm font-medium">Content below</p>
    </div>
</template>

Orientation

Horizontal (default):

<template>
    <Separator orientation="horizontal" />
</template>

Vertical:

<template>
    <div class="flex h-8 items-center gap-4">
        <span class="text-sm font-bold">Item 1</span>
        <Separator orientation="vertical" />
        <span class="text-sm font-bold">Item 2</span>
    </div>
</template>

Separator with Text

When orientation="horizontal" and the default slot has content, the Separator renders as a centered text separator: separators on both sides with the slot content in the middle.

<template>
    <Separator>Section Title</Separator>
</template>

Text separators also support variant and size:

<template>
    <Separator variant="primary" size="lg">Primary Title</Separator>
</template>

Note: In text separator mode, the class attribute is applied to the separators on both sides rather than the outer container. This is consistent with the behavior in normal mode where class is applied to the separator element.

Variants

Variant	Description
default	Foreground color (bg-brutal-fg)
primary	Primary color (bg-brutal-primary)
muted	Muted color (bg-brutal-muted)

<template>
    <div class="space-y-2">
        <Separator variant="default" />
        <Separator variant="primary" />
        <Separator variant="muted" />
    </div>
</template>

Sizes

Size	Thickness
sm	2px
default	var(--brutal-border-width, 3px)
lg	5px

<template>
    <div class="space-y-2">
        <Separator size="sm" />
        <Separator size="default" />
        <Separator size="lg" />
    </div>
</template>

API Reference

Separator — Props

Name	Type	Default	Description
variant	"default" | "muted" | "primary" | undefined	"default"	Selects the separator color style.
Details Declared type NonNullable<"default" | "primary" | "muted" | null | undefined> | undefined Literal values "default" "muted" "primary" Default value details Declaration 'default' Source: packages/ui/src/components/separator/Separator.vue Resolved value "default" Source Separator.vue:12 packages/ui/src/components/separator/Separator.vue
size	"default" | "lg" | "sm" | undefined	"default"	Controls the preset thickness of the separator line.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/separator/Separator.vue Resolved value "default" Source Separator.vue:13 packages/ui/src/components/separator/Separator.vue
orientation	"horizontal" | "vertical" | undefined	"horizontal"	Selects horizontal or vertical orientation; text content is centered between line segments only horizontally.
Details Declared type NonNullable<"vertical" | "horizontal" | null | undefined> | undefined Literal values "horizontal" "vertical" Default value details Declaration 'horizontal' Source: packages/ui/src/components/separator/Separator.vue Resolved value "horizontal" Source Separator.vue:14 packages/ui/src/components/separator/Separator.vue
decorative	boolean | undefined	true	When decorative, the element has no separator semantics; when false, it receives role="separator" and orientation semantics.
Details Declared type boolean | undefined Literal values false true Default value details Declaration true Source: packages/ui/src/components/separator/Separator.vue Resolved value true Source Separator.vue:15 packages/ui/src/components/separator/Separator.vue
class	string | undefined	undefined	CSS classes added to the native separator or to the text-separator line segments.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/separator/Separator.vue Resolved value undefined Source Separator.vue:16 packages/ui/src/components/separator/Separator.vue

Separator — Slots

Name	Signature or type	Description
#default	{}	Optional separator content. When horizontal and non-empty, it appears between line segments; otherwise it is passed to the underlying Reka UI separator primitive.
Details Declared type {} Source Separator.vue packages/ui/src/components/separator/Separator.vue

Accessibility

• ARIA Attributes: When decorative is true, no semantic role is set; when false, role="separator" is automatically set