You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

Button component

The Button component allows user to perform a list of predefined actions by clicking on the corresponding button. Its default display mode is the HTML <button> element, which be configured to display a link.

Configuration options

Option Description Type Default
component The path to the component’s JS constructor in terms of RequireJS. String Magento_Ui/js/form/components/button
additionalClasses Sets custom classes to the component’s DOM block. Object {}
buttonClasses Sets custom classes to the HTML <button> element. Object {}
disabled Initial component’s state. When set to true, users can’t take action on the element. Boolean false
displayAsLink Show the button as a link. Boolean false
elementTmpl The path to the child component’s .html template. String ui/form/element/button
template Path to the general .html template for a button. String ui/form/components/button/simple
title Button title. String ''
displayArea Display area of the component. String outsideGroup
visible Initial component’s visibility. When set to false, the "display: none" CSS style is added to the component’s DOM block. Boolean true
actions A list of actions that are performed when user clicks on the element. ButtonAction[] -

ButtonAction interface

Option Description Type Required
targetName Reference to component. String Required
actionName Name of the component’s method to be invoked. String Required
params A list of arguments that will be passed to the method. Array Optional

Examples

Configure component

Here is an example of a Button component (“Test Button”) added below a Listing component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
<button name="my_new_button">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="actions" xsi:type="array">
                <!-- Add your button's actions here -->
                <item name="0" xsi:type="array">
                    <item name="targetName" xsi:type="string">TARGET_NAME</item>
                    <item name="actionName" xsi:type="string">ACTION_NAME</item>
                </item>
            </item>
        </item>
    </argument>
    <settings>
        <displayAsLink>false</displayAsLink>
        <title><![CDATA[Test Button]]></title>
    </settings>
</button>
...

Result

The Button component appears below a Listing component on the page, as follows:

Listing button

Source files

Extends UiElement: