Components / Display

Separator

A horizontal or vertical rule between related sections.

Preview

Use cases

Visual grouping

Break up controls within a menu, form, or settings panel.

Meaningful division

Expose a division between two content groups when it helps navigation.

Usage example

Vue

<script setup lang="ts">
import Separator from './components/ui/separator/Separator.vue'
</script>

<template>
  <Separator />
  <div class="flex h-6 items-center gap-4">
    <span>First</span>
    <Separator orientation="vertical" :decorative="false" />
    <span>Second</span>
  </div>
</template>

More examples

Settings sections

The default decorative separator avoids adding extra noise to the accessibility tree.

Settings sections

<script setup lang="ts">
import Separator from './components/ui/separator/Separator.vue'
</script>

<template>
  <section><h2>Profile</h2><p>Public information</p></section>
  <Separator class="my-4" />
  <section><h2>Security</h2><p>Sign-in options</p></section>
</template>

Vertical divider

Give a vertical separator a parent with a definite height.

Vertical divider

<script setup lang="ts">
import Separator from './components/ui/separator/Separator.vue'
</script>

<template>
  <div class="flex h-8 items-center gap-3">
    <span>Draft</span><Separator orientation="vertical" :decorative="false" /><span>Updated today</span>
  </div>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Separator
Name	Type	Default or requirement
`orientation`	horizontal \| vertical	horizontal
`decorative`	boolean	true

Set decorative to false when the separator conveys structure to assistive technology.

Implementation notes

Vertical rules need available height from their container.
Spacing around the separator belongs to the surrounding layout.

Accessibility and localization

Set decorative to false only when the divider conveys a meaningful structural boundary.