Note

This documentation describes the HorizontalLayout Vue component for native UI views, for Xml templates see horizontal-layout.

HorizontalLayout

A flex-row layout container. Arranges children horizontally using CSS custom properties derived from design-system tokens.

Import

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

Props

Prop	Type	Default	Description
space	'none' \| 'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	'small'	Gap between children
align	'left' \| 'center' \| 'right' \| 'start' \| 'end' \| 'stretch' \| 'space-between'	'left'	Main-axis alignment (justify-content)
verticalAlign	'top' \| 'center' \| 'bottom' \| 'stretch'	'stretch'	Cross-axis alignment (align-items)
wrap	boolean	true	Allow children to wrap to next row
reverse	boolean	false	Reverse child order
fullHeight	boolean	false	Stretch container to full parent height

Slots

Slot	Description
default	Children to arrange horizontally

Usage Examples

Basic row of items

<HorizontalLayout space="medium">
  <button label="Cancel" />
  <button label="Save" variant="primary" />
</HorizontalLayout>

Non-wrapping toolbar row

<HorizontalLayout :wrap="false" space="small" align="right">
  <button icon="search" />
  <button icon="refresh" />
  <button label="Add" variant="primary" />
</HorizontalLayout>

Centered row with large spacing

<HorizontalLayout align="center" vertical-align="center" space="large" :full-height="true">
  <Spinner />
  <Text>Loading…</Text>
</HorizontalLayout>

Reversed button order (right-to-left theme)

<HorizontalLayout :reverse="true" space="small">
  <button label="Primary" variant="primary" />
  <button label="Cancel" />
</HorizontalLayout>