Skip to content

Separator

A separator element accessible to screen readers.

Anatomy

Import the component and use it as a single part:

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

<template>
  <Separator />
</template>

API reference

PropTypeDefaultDescription
asstring | Component'div'The element or component to use for the root node.
orientation'horizontal' | 'vertical''horizontal'The orientation of the separator.
classany | ((state: State) => any)undefinedCSS class applied to the element, or a function that returns a class based on the component's state.
styleStyleValue | ((state: State) => StyleValue)undefinedStyle applied to the element, or a function that returns a style object based on the component's state.
AttributeDescription
data-orientationIndicates the separator orientation.