---
title: "How To Add Custom Button In System Configurations Magento 2"
url: "https://dolphinwebsolution.com/how-to-add-custom-button-in-system-configurations-magento-2"
date: "2021-12-13T10:58:08+05:30"
modified: "2023-08-25T08:58:32+05:30"
author:
  name: "Jigar Patel"
categories:
  - "Magento"
word_count: 945
reading_time: "5 min read"
summary: "Adding a custom button in the system configuration is a quite common task when creating a custom module. Quaternary buttons are only after all the buttons hierarchy have been used.

The system.xm..."
description: "Adding a custom button in the system configuration is a quite common task when creating a custom module. Quaternary buttons are only after all the buttons hi..."
keywords: "custom button in system configuration,add custom button magento 2, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to add/remove column and other DB operations to table in Magento 2.3 using declarative schema?"
    url: "https://dolphinwebsolution.com/how-to-add-remove-column-and-other-db-operations-to-table-in-magento-2-3-using-declarative-schema"
  - title: "How to Add a Custom field at Product Form Magento 2"
    url: "https://dolphinwebsolution.com/how-to-add-a-custom-field-at-product-form-page-magento-2"
  - title: "Magento: How to implement custom indexing within flash time?"
    url: "https://dolphinwebsolution.com/magento-how-to-implement-custom-indexing-within-flash-time"
---

# How To Add Custom Button In System Configurations Magento 2

_Published: December 13, 2021_  
_Author: Jigar Patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2021/12/How-To-Add-Split-Button-on-Admin-Page-in-Magento-3-1024x536.png)

Adding a custom button in the system configuration is a quite common task when creating a custom module. [**Quaternary buttons**](https://developer.adobe.com/commerce/admin-developer/pattern-library/controls/buttons/) are only after all the buttons hierarchy have been used.

The system.xml is a configuration file that is used to create configuration fields in Magento 2 System Configuration.

Button in System Config can be used to launch different actions of your extension. In our case, the button will call some controller via Ajax and return some results.

**Read This:** [How To Add Split Button on Admin Page in Magento 2](https://dolphinwebsolution.com/how-to-add-split-button-on-admin-page)

We are already learned [how to create a basic module in Magento 2](https://dolphinwebsolution.com/how-to-create-basic-module-in-magento-2). We need to create **module.xml** and **registration.php** file. You can create **module.xml** and **registration.php** from this tutorial.

Here we are using **Dolphin** as Vendor name and **InvoiceEmail** as the name of a module. You can change this according to your Vendor and Module name.

#### Step 1: Create System XML
Create system config file **system.xml** in **app/code/Dolphin/InvoiceEmail/etc/adminhtml** folder with the following code.

```
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="dolphintab" translate="label" sortOrder="100">
            <label>Dolphin</label>
        </tab>
                    <class>separator-top</class>
            <label>Date Time</label>
            <tab>dolphintab</tab>
            <resource>Dolphin_InvoiceEmail::config_extension</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1"
                   showInStore="1">
                <label>General</label>
                <field id="run" showInDefault="1" showInStore="0" showInWebsite="0" sortOrder="40" translate="label" type="text">
                    <label>Custom Button</label>
                    <frontend_model>Dolphin\InvoiceEmail\Block\Adminhtml\System\Config\Form\Button</frontend_model>
                    <comment/>
                </field>
            </group>
            </system>
</config>
```

#### **Step 2:** Create a Block

Create a **Button.php** file in the **app/code/Dolphin/InvoiceEmail/Block/Adminhtml/System/Config/Form** folder with the following code.

```
<?php

namespace Dolphin\InvoiceEmail\Block\Adminhtml\System\Config\Form;

use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

class Button extends Field
{
    /**
     * @var \Magento\Framework\UrlInterface|null
     */
    protected $_urlBuilder = null;

    /**
     * Constructor
     *
     * @param \Magento\Backend\Block\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
    }

    /**
     * @param AbstractElement $element
     * @return string
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    protected function _getElementHtml(AbstractElement $element)
    {
        $button = $this->getLayout()->createBlock(
            'Magento\Backend\Block\Widget\Button'
        )->setData([
            'id' => 'inventory_button',
            'label' => __('Update Inventory'),
        ])
            ->setDataAttribute(
                ['role' => 'dolphin-update-inventory']
            );

        /** @var \Magento\Backend\Block\Template $block */
        $block = $this->_layout->createBlock('\Dolphin\InvoiceEmail\Block\Adminhtml\System\Config\Form\Button');
        $block->setTemplate('Dolphin_InvoiceEmail::system/config/form/button.phtml')
            ->setChild('button', $button)
            ->setData('select_html', parent::_getElementHtml($element));

        return $block->toHtml();
    }

    public function getAjaxCheckUrl()
    {
        return $this->_urlBuilder->getUrl('updatestock/updatestock/index');
    }
}
```

**$block->setTemplate()** set the button template in system config page.

#### **Step 3:** Create Template File

Create a **button.phtml** file in the **app/code/Dolphin/InvoiceEmail/view/adminhtml/templates/system/config/form** folder with the following code.

```
<?php
/** @var $block Dolphin\InvoiceEmail\Block\Adminhtml\System\Config\Form\Button */
?>
<?= $block->getChildHtml('button') ?>
    <img class="processing" hidden="hidden" alt="Collecting" style="margin:0 5px"
         src="<?php echo $block->getViewFileUrl('images/process_spinner.gif') ?>"/>
    <img class="inventoryed" hidden="hidden" alt="Collected" style="margin:-3px 5px"
         src="<?php echo $block->getViewFileUrl('images/rule_component_apply.gif') ?>"/>

<script>
    require([
        'jquery',
        'prototype'
    ], function (jQuery) {

        jQuery('#inventory_button').click(function () {
            //alert("here");
            generateinventorybutton();
        });

        function generateinventorybutton() {
            var inventorySpan = jQuery('#inventory_span');
            new Ajax.Request('<?= $block->getAjaxCheckUrl() ?>', {
                method: 'get',
                loaderArea: true,
                asynchronous: true,
                onCreate: function () {
                    inventorySpan.find('.inventoryed').hide();
                    inventorySpan.find('.processing').show();
                    jQuery('#inventory_message_span').text('');
                },
                onSuccess: function (response) {
                    inventorySpan.find('.processing').hide();

                    var resultText = '';
                    if (response.status > 200) {
                        resultText = response.statusText;
                    } else {
                        resultText = 'Success';
                        inventorySpan.find('.inventoryed').show();
                    }
                    jQuery('#inventory_message_span').text(resultText);

                    var json = response.responseJSON;
                    if (typeof json.time != 'undefined') {
                        jQuery('#row_mageworx_alsobought_general_inventory_time').find('.value .time').text(json.time);
                    }
                }
            });
        }

    });
</script>
```

**getAjaxCheckUrl()** method return ajax url from **Button Block**.

Now execute the below command and refresh the page:

```
[dt_highlight color="" text_color="" bg_color=""]php bin/magento s:up[/dt_highlight]
[dt_highlight color="" text_color="" bg_color=""]php bin/magento c:c[/dt_highlight]
```

**Result :**

![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2021/10/Configuration-Settings-Stores-Magento-Admin-e1635351749949-1024x303.png)

You check it also in vendor/magento/module-customer/etc/adminhtml/system.xml for the button. Below code check it in the above path. Create frontend\_model like this vendor/magento/module-customer/Block/Adminhtml/System/Config/Validatevat.php.

```
<group id="store_information">
     <field id="validate_vat_number" translate="button_label" sortOrder="62" showInDefault="1" showInWebsite="1" showInStore="0">
           <button_label>Validate VAT Number</button_label>
           <frontend_model>Magento\Customer\Block\Adminhtml\System\Config\Validatevat</frontend_model>
     </field>
</group>
```

Above path for your reference.

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

**Thank you!**


---

_View the original post at: [https://dolphinwebsolution.com/how-to-add-custom-button-in-system-configurations-magento-2](https://dolphinwebsolution.com/how-to-add-custom-button-in-system-configurations-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:54:46 UTC_