Note

This documentation describes the Divider Vue component for native UI views for Xml templates see divider.

Divider

A visual separator between sections. Wraps PrimeVue Divider with design-system token support.

Import

import { Divider } from '@neos/design-system'

Props

Prop	Type	Default	Description
layout	'horizontal' \| 'vertical'	'horizontal'	Divider orientation
type	'solid' \| 'dashed' \| 'dotted'	'solid'	Line style
contentAlign	'start' \| 'center' \| 'end'	'center'	Alignment of slotted content along the divider
color	string	undefined	Custom border color (CSS color value or design-system color token)

Slots

Slot	Description
default	Optional content displayed on the divider line (e.g. a label)

Usage Examples

Simple horizontal separator

<VerticalLayout>
  <Text>Section A</Text>
  <Divider />
  <Text>Section B</Text>
</VerticalLayout>

Divider with label

<Divider>OR</Divider>

Dashed divider with custom color

<Divider type="dashed" color="gray-300" />

Vertical separator between two panels

<HorizontalLayout :wrap="false">
  <LeftPanel />
  <Divider layout="vertical" />
  <RightPanel />
</HorizontalLayout>