Melt UI Logo

Separator

Displays a horizontal or vertical line to separate content.

Melt UI

Flavors for everyone

Caramel

Vanilla

Napolitan

Features

  • Supports horizontal and vertical orientation
  • Supports decorative and non-decorative separators

Anatomy

  • Root: The separator element

API Reference

createSeparator

Props

Prop Default Type / Description
orientation 'horizontal'
'horizontal' | 'vertical'

The orientation of the separator.
decorative false
boolean

Whether or not the separator is for purely decorative purposes. This will determine if the separator is in the accessibility tree or not.

Returned Props

Returned Prop Type Description
options
Writable<CreateSeparatorProps>

A writable store that can be used to update the separator props.
root
-

The builder store used to create the separator root.

root

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'
[data-melt-separator]

Present on all separator elements.

Accessibility

Adheres to the Separator WAI-ARIA role