Note

This documentation describes the ButtonsLayout Vue component for native UI views for Xml templates see buttons-layout.

ButtonsLayout

A horizontal layout container specifically designed for grouping buttons. Automatically applies theme-driven order, alignment, and spacing — no manual configuration required.

Import

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

Props

None. Layout behavior (button order, alignment, spacing) is fully derived from the active theme via useThemeManager and useButtonContainerSpace.

Slots

Slot	Description
default	Button components to lay out

Usage Examples

Standard form action bar

<ButtonsLayout>
  <button label="Cancel" @click="cancel" />
  <button label="Save" variant="primary" @click="save" />
</ButtonsLayout>

Modal footer

<Modal :is-open="open" :dismissible="true">
  <template #body>
    <Text>Are you sure you want to delete this record?</Text>
  </template>
  <template #footer>
    <ButtonsLayout>
      <button label="Cancel" @click="open = false" />
      <button label="Delete" variant="danger" @click="deleteRecord" />
    </ButtonsLayout>
  </template>
</Modal>

Notes

• The order of buttons in the DOM reflects the order in the slot. Theme configuration controls whether they appear reversed visually.
• Use ButtonsLayout instead of a plain HorizontalLayout whenever laying out action buttons, to ensure consistency with the active theme.