Note

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

Toolbar

The standard action bar for views. Renders ViewModel-bound action buttons in a horizontal row, filtering visibility based on ViewModel permissions and prop overrides.

Import

import { Toolbar } from '@neos/app'

Props

Prop	Type	Default	Description
save	boolean	true	Show the Save button. Hidden automatically for sub-ViewModels
refresh	boolean	true	Show the Refresh button. Hidden automatically for sub-ViewModels
add	boolean	true	Show the Add button. Also hidden if viewModel.creationAllowed is false
remove	boolean	true	Show the Remove button. Also hidden if viewModel.deletionAllowed is false
clone	boolean	false	Show the Clone button
close	boolean	undefined	Show the Close button. When undefined, shown automatically in stack frame mode
dataExport	boolean	false	Show the Export button
actions	boolean	true	Show custom ViewModel actions. Set false to hide all non-standard buttons
customViews	boolean	true	Show the Custom View picker button
size	'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	undefined	Size applied to all buttons (inherited from theme when undefined)
animated	boolean	undefined	Enable loading animations on buttons

Notes

• ViewModel permissions take precedence over props. Setting :add="true" will not show the Add button if viewModel.creationAllowed === false.
• Sub-ViewModels (child/line models) never show Save or Refresh regardless of props.
• The More button appears automatically when the ViewModel has overflow actions.

Usage Examples

Default toolbar

<Toolbar />

Read-only view

<Toolbar :save="false" :add="false" :remove="false" />

Enable clone and export

<Toolbar :clone="true" :data-export="true" />

Compact toolbar

<Toolbar size="small" :actions="false" />

Force close button

<Toolbar :close="true" :save="true" :add="false" :remove="false" :refresh="false" />

Full list view

<VerticalLayout space="none">
  <Toolbar />
  <FilterBar />
  <Datagrid />
  <PaginationBar />
</VerticalLayout>