Note

This documentation describes the ActionButton Vue component for native UI views for Xml templates see Button with type="action".

ActionButton

Renders a single ViewModel action as a button. Automatically selects the correct button variant (simple, split, or dropdown) based on the action's configuration. Can also be used without an explicit action to render built-in add/clone/remove/export buttons.

Import

import { ActionButton } from '@neos/app'

Props

Prop	Type	Default	Description
action	ViewModelAction	undefined	The ViewModel action to render
actionName	string	undefined	Name of the action to look up from the ViewModel (alternative to action)
item	Model	undefined	The data item on which the action runs. Falls back to selected items or current record
ignoreSelectedItems	boolean	false	Run the action on item only, ignoring any ViewModel selection
add	boolean	false	Render a built-in Add button
clone	boolean	false	Render a built-in Clone button
remove	boolean	false	Render a built-in Remove button
dataExport	boolean	false	Render a built-in Export button
tooltip	string	undefined	Tooltip override
contentAlign	'left' \| 'center' \| 'right'	undefined	Button label alignment
size	'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	undefined	Button size
animated	boolean	true	Enable loading spinner animation

Behavior

• When action.displayType === 'split', renders a SplitButton.
• When action.displayType === 'dropdown', renders a dropdown button with sub-actions.
• Otherwise, renders a single Button.
• Visibility follows the action's isVisible flag and ViewModel permissions.

Usage Examples

Render an action by object

<ActionButton :action="action" />

Render an action by name

<ActionButton action-name="sendEmail" />

Built-in add button

<ActionButton :add="true" />

Custom row action in a Datagrid

<Datagrid>
  <template #actions-display="{ cell }">
    <ActionButton action-name="archive" :item="cell.item" :ignore-selected-items="true" />
  </template>
</Datagrid>

Compact action buttons

<HorizontalLayout space="small">
  <ActionButton :add="true" size="small" />
  <ActionButton :remove="true" size="small" />
</HorizontalLayout>