Preview

Installation

npx sigma-ui@latest add separator

Usage

<script setup lang="ts">
import { Separator } from '@/components/ui/separator';
</script>

<template>
  <Separator label="Or" />
</template>

• label displays a short text in the middle of the line.
• Set decorative when the separator is purely visual, so it is hidden from assistive technologies.

Examples

Vertical

Set orientation="vertical" to separate inline items. The parent needs a height.

<template>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <Separator orientation="vertical" />
    <div>Docs</div>
    <Separator orientation="vertical" />
    <div>Source</div>
  </div>
</template>

API Reference

Separator

Props

Prop	Type	Default
orientation Orientation of the component. Either vertical or horizontal. Defaults to horizontal.	DataOrientation	-
decorative Whether or not the component is purely decorative. <br>When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
label Text displayed centered on the line.	string	-

Accessibility

Renders an element with the separator role, or no role when decorative is set. It has no keyboard interactions of its own.

Key	Description
None	Separator is not focusable.