Separator

Visually separates content or UI elements for clarity and organization.

Bits UI

Headless UI components for Svelte.

Blog
Docs
Source

Structure

	<script lang="ts">
	import { Separator } from "bits-ui";
</script>
 
<Separator.Root />
	

API Reference

Separator.Root

An element used to separate content.

Property Type Description
orientation
enum

The orientation of the separator.

Default: 'horizontal'
decorative
boolean

Whether the separator is decorative or not, which will determine if it is announce by screen readers.

Default: false
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-orientation
enum

The orientation of the separator.

data-separator-root
——

Present on the root element.