Separator

An enterprise-level separator component based on BrConfigProvider for global theme configuration. It supports horizontal/vertical display, style customization, and text slots.

Component Features

📏 Orientation: Supports both horizontal and vertical directions, automatically adapting to the container's width/height.
🎨 Style Customization: Provides multiple variants (solid, dashed, dotted, double) and thicknesses (thin, medium, thick).
🔤 Text Slots: Supports adding text or elements within the separator, automatically calculating background and spacing.
🧩 Component Integration: Seamlessly integrates with cards, forms, menus, and other components.
🌓 Theme Adaption: Automatically adapts to light/dark themes based on BrConfigProvider, supporting global style overrides.
♿ Accessibility: Provides semantic roles and supports decorative prop for screen readers.

Basic Usage

Basic horizontal and vertical separators.

<script setup lang="ts">
import { BrSeparator } from '@breezeui/vue'
</script>

<template>
  <div class="border rounded-md p-6 bg-card max-w-sm">
    <div class="space-y-1">
      <h4 class="text-sm font-medium leading-none">BreezeUI</h4>
      <p class="text-sm text-muted-foreground">
        An enterprise-class UI design language and Vue UI library.
      </p>
    </div>
    <BrSeparator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
      <div>Docs</div>
      <BrSeparator orientation="vertical" />
      <div>Components</div>
      <BrSeparator orientation="vertical" />
      <div>GitHub</div>
    </div>
  </div>
</template>

Styles & Thickness

You can customize the separator's appearance using the thickness and variant props.

<script setup lang="ts">
import { BrSeparator, BrFlex } from '@breezeui/vue'
</script>

<template>
  <div class="border rounded-md p-6 bg-card space-y-6 w-full max-w-md">
    <BrFlex direction="column" gap="4">
      <div>
        <p class="text-sm mb-2 font-medium">Thickness</p>
        <div class="space-y-4">
          <BrSeparator thickness="thin" />
          <BrSeparator thickness="medium" />
          <BrSeparator thickness="thick" />
        </div>
      </div>
      
      <BrSeparator class="my-2" />
      
      <div>
        <p class="text-sm mb-2 font-medium">Variants</p>
        <div class="space-y-4">
          <BrSeparator variant="dashed" />
          <BrSeparator variant="dotted" thickness="medium" />
          <BrSeparator variant="double" thickness="thick" />
        </div>
      </div>
    </BrFlex>
  </div>
</template>

Card & Form Integration

Separators are often used to divide content within cards or group sections within forms.

<script setup lang="ts">
import { BrCard, BrCardHeader, BrCardTitle, BrCardContent, BrSeparator, BrForm, BrFormItem, BrFormLabel, BrInput } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col md:flex-row gap-8">
    <BrCard class="w-full md:w-[350px]">
      <BrCardHeader>
        <BrCardTitle>Notifications</BrCardTitle>
      </BrCardHeader>
      <BrSeparator />
      <BrCardContent class="pt-6">
        <div class="space-y-4 text-sm">
          <div class="flex justify-between items-center">
            <span>Emails</span>
            <span class="text-muted-foreground bg-muted px-2 py-1 rounded">On</span>
          </div>
          <BrSeparator variant="dashed" />
          <div class="flex justify-between items-center">
            <span>Push Notifications</span>
            <span class="text-muted-foreground bg-muted px-2 py-1 rounded">Off</span>
          </div>
        </div>
      </BrCardContent>
    </BrCard>

    <BrCard class="w-full md:w-[400px]">
      <BrCardHeader>
        <BrCardTitle>Profile Settings</BrCardTitle>
      </BrCardHeader>
      <BrSeparator />
      <BrCardContent class="pt-6">
        <BrForm class="space-y-4">
          <BrFormItem>
            <BrFormLabel>Name</BrFormLabel>
            <BrInput placeholder="John Doe" />
          </BrFormItem>
          <BrSeparator variant="dotted" class="my-4" />
          <BrFormItem>
            <BrFormLabel>Email</BrFormLabel>
            <BrInput placeholder="john@example.com" />
          </BrFormItem>
        </BrForm>
      </BrCardContent>
    </BrCard>
  </div>
</template>

With Text

You can use the default slot to add text or other elements to the center of the separator. The component will automatically manage the z-index and background color to ensure the text is readable.

<script setup lang="ts">
import { BrSeparator } from '@breezeui/vue'
</script>

<template>
  <div class="border rounded-md p-8 bg-card space-y-12 w-full max-w-md">
    <div class="relative">
      <BrSeparator>OR</BrSeparator>
    </div>
    
    <div class="relative">
      <BrSeparator variant="dashed">Continue with</BrSeparator>
    </div>
    
    <div class="h-32 flex justify-center items-center">
      <div class="w-1/2 text-center text-sm">Left Content</div>
      <BrSeparator orientation="vertical">AND</BrSeparator>
      <div class="w-1/2 text-center text-sm">Right Content</div>
    </div>
  </div>
</template>

Theme Customization

Combined with BrConfigProvider, the separator automatically adapts its color to the current theme based on the --border CSS variable.

<script setup lang="ts">
import { ref } from 'vue'
import { BrSeparator, BrConfigProvider, BrButton, BrCard, BrCardContent } from '@breezeui/vue'

const isDark = ref(false)
const theme = ref({
  primary: '#10b981',
  radius: 0.5,
})

function toggleTheme() {
  isDark.value = !isDark.value
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div :class="[isDark ? 'dark bg-slate-950' : 'bg-white', 'p-6 rounded-md transition-colors duration-300 border border-border']">
      <div class="flex justify-between items-center mb-6">
        <h3 :class="isDark ? 'text-white' : 'text-slate-900'" class="font-medium">Theme Adaption</h3>
        <BrButton variant="outline" size="sm" @click="toggleTheme">
          Toggle Theme
        </BrButton>
      </div>

      <BrCard class="bg-card text-card-foreground">
        <BrCardContent class="pt-6 space-y-6">
          <div class="space-y-4">
            <p class="text-sm text-muted-foreground">The separator automatically adapts its color to the current theme based on the <code>--border</code> CSS variable provided by ConfigProvider.</p>
            
            <BrSeparator />
            
            <div class="flex h-10 items-center justify-center space-x-4 text-sm">
              <span>Item 1</span>
              <BrSeparator orientation="vertical" />
              <span>Item 2</span>
              <BrSeparator orientation="vertical" variant="dashed" />
              <span>Item 3</span>
            </div>
            
            <BrSeparator variant="dotted">End of Section</BrSeparator>
          </div>
        </BrCardContent>
      </BrCard>
    </div>
  </BrConfigProvider>
</template>

API Reference

BrSeparator

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the separator
`decorative`	`boolean`	`true`	Whether the component is purely decorative. When true, it will be ignored by screen readers
`thickness`	`'thin' \| 'medium' \| 'thick' \| string`	`'thin'`	The thickness of the separator
`variant`	`'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'`	`'solid'`	The visual style variant of the separator
`label`	`string`	-	Text label for the separator
`labelPlacement`	`'start' \| 'center' \| 'end'`	`'center'`	The position of the label
`color`	`string`	-	Custom color
`gap`	`number \| string`	-	The gap between text and lines
`as`	`string`	`'div'`	The HTML tag to render
`class`	`any`	-	Custom class name

SeparatorManager

A global singleton utility class used to manage z-index levels when multiple separators with text are nested or layered, preventing overlap conflicts.

Method	Description
`getInstance()`	Get the singleton instance
`getNextZIndex()`	Increment and get the next available z-index
`registerInstance(id)`	Register a component instance
`unregisterInstance(id)`	Unregister a component instance
`getInstancesCount()`	Get the total number of registered instances

#Separator

#Component Features

#Basic Usage

#Styles & Thickness

#Card & Form Integration

#With Text

#Theme Customization

#API Reference

#BrSeparator

#SeparatorManager