How to create a Button in Configuration Section of Adobe Commerce (Magento 2)

Here we will learn that How to create a button at Store -> Configuration -> yourSection in Adobe Commerce (Magento 2).

The button will look like as displayed in the image.

1. Open a file Webkul/Addbutton/etc/adminhtml/system.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="webkul" translate="label" sortOrder="10">
            <label>Webkul</label>
        </tab>
        <section id="demomanagement" translate="label" type="text" sortOrder="305" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Demo Management</label>
            <tab>webkul</tab>
            <resource>Webkul_Addbutton::config_addbutton</resource>
            <group id="showbutton" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <field id="listbutton" translate="label" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <frontend_model>Webkul\Addbutton\Block\System\Config\Form\Button</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

2. Now create a frontend_model that we have defined in system.xml
Webkul/Addbutton/Block/System/Config/Form/Button.php

<?php
namespace Webkul\Addbutton\Block\System\Config\Form;

class Button extends \Magento\Config\Block\System\Config\Form\Field
{
    const BUTTON_TEMPLATE = 'system/config/button/button.phtml';

    /**
     * Set template to itself
     *
     * @return $this
     */
    protected function _prepareLayout()
    {
        parent::_prepareLayout();
        if (!$this->getTemplate()) {
            $this->setTemplate(static::BUTTON_TEMPLATE);
        }
        return $this;
    }

    /**
     * Render button
     *
     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string
     */
    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        // Remove scope label
        $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
        return parent::render($element);
    }
    /**
     * Return ajax url for button
     *
     * @return string
     */
    public function getAjaxCheckUrl()
    {
        return $this->getUrl('addbutton/listdata'); //hit controller by ajax call on button click.
    }

    /**
     * Get the button and scripts contents
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        
        $this->addData(
            [
                'id'        => 'addbutton_button',
                'button_label' => __('New Button'),
                'onclick'   => 'javascript:check(); return false;'
            ]
        );
        return $this->_toHtml();
    }
}

Now let’s create a button.phtml
Webkul/Addbutton/view/adminhtml/templates/system/config/button/button.phtml

<div class="pp-buttons-container">
    <button id="<?= $block->getId() ?>" onclick="return false;">
        <span><span><span><?php echo $block->escapeHtml($block->getButtonLabel()); ?></span></span></span>
    </button>
</div>

Now refresh the cache and go to your store->configuration->your_section, you will see a button here.

If you need any technical support, please contact us at support@webkul.com. Additionally, explore various ways to enhance your online store by visiting the Adobe Commerce modules section.

For expert guidance or to develop customized features, hire Adobe Commerce Developers for your project.