Separator

A component for visually separating content sections.

Import

<script setup lang="ts">
import { Separator } from '@heroui-vue/vue'
</script>

Usage

Basic

Above the separator

Below the separator

<template>
  <div class="flex flex-col gap-3">
    <p class="text-sm">Above the separator</p>
    <Separator />
    <p class="text-sm">Below the separator</p>
  </div>
</template>

<script setup>
import { Separator } from '@heroui-vue/vue'
</script>

Vertical

<template>
  <div style="display: flex; height: 100px;">
    <span>Left</span>
    <Separator orientation="vertical" />
    <span>Right</span>
  </div>
</template>

With Label

<template>
  <div>
    <p>Section 1</p>
    <Separator>
      <span>OR</span>
    </Separator>
    <p>Section 2</p>
  </div>
</template>

Colors

<template>
  <Separator />
</template>

Sizes

<template>
  <Separator />
</template>

API

Separator Props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	The separator orientation

Separator Slots

Slot	Description
default	Label content in the middle of the separator

Accessibility

• Separator uses role="separator" for proper semantics
• Decorative separators use aria-hidden="true"
• Screen reader friendly