{"id":567,"date":"2019-08-26T05:04:01","date_gmt":"2019-08-26T05:04:01","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/08\/26\/add-custom-button-in-magento-2-system-configuration\/"},"modified":"2025-05-22T16:06:59","modified_gmt":"2025-05-22T10:36:59","slug":"add-custom-button-in-magento-2-system-configuration","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-button-in-magento-2-system-configuration\/","title":{"rendered":"How to Add Custom Button in Magento 2 System Configuration"},"content":{"rendered":"\n

While developing a Magento 2 extension, you have to follow various requirements and one such that I’m posting the solution for is to add a custom button in Magento 2 system configuration<\/strong><\/i>.<\/p>\n\n\n\n

You would want to create a button in the Magento 2 system configuration for custom functionality or perform an action. For example, call a Helper function or controller action.<\/p>\n\n\n\n

I used this solution to create a button that generates a CSV file for product attributes as shown here:<\/p>\n\n\n

\n
\"Add<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Check the solution below and do let me know how it was useful to you.<\/p>\n\n\n\n

Steps to Add Custom Button in Magento 2 System Configuration:<\/h2>\n\n\n\n

1. Create field in [Vendor]\\[Module]\\etc\\adminhtml\\system.xml file<\/strong><\/strong><\/p>\n\n\n\n

<field id=\"button_id\" translate=\"label\" type=\"button\" sortOrder=\"10\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\n    <label>Label Text<\/label>\n    <frontend_model>[Vendor]\\[Module]\\Block\\System\\Config\\Button<\/frontend_model>\n<\/field><\/pre>\n\n\n\n
2. Create Button.php<\/strong><\/em> file in [Vendor]\\[Module]\\Block\\System\\Config<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n
<?php\nnamespace [Vendor]\\[Module]\\Block\\System\\Config;\nuse Magento\\Config\\Block\\System\\Config\\Form\\Field;\nuse Magento\\Backend\\Block\\Template\\Context;\nuse Magento\\Framework\\Data\\Form\\Element\\AbstractElement;\nclass Button extends Field\n{\n    protected $_template = '[Vendor]_[Module]::system\/config\/button.phtml';\n    public function __construct(Context $context, array $data = [])\n    {\n        parent::__construct($context, $data);\n    }\n\n    public function render(AbstractElement $element)\n    {\n        $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();\n        return parent::render($element);\n    }\n    protected function _getElementHtml(AbstractElement $element)\n    {\n        return $this->_toHtml();\n    }\n    public function getCustomUrl()\n    {\n        return $this->getUrl('router\/controller\/action');\n    }\n    public function getButtonHtml()\n    {\n        $button = $this->getLayout()->createBlock('Magento\\Backend\\Block\\Widget\\Button')->setData(['id' => 'btn_id', 'label' => __('Button Label'),]);\n        return $button->toHtml();\n    }\n}<\/pre>\n\n\n\n
3. Create button.phtml<\/strong><\/em> file in [Vendor]\\[Module]\\view\\adminhtml\\templates\\system\\config<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n
<?php\n    $controller = $block->getCustomUrl();\n    echo $block->getButtonHtml();\n?><\/pre>\n\n\n\n
That was all about creating a button in system configuration in Magento 2 for custom functionality. To make your extensions work expectedly certain configurations are made to have particular values for that you need to set default values for configuration field in Magento 2<\/a>.<\/p>\n\n\n\n
Feel free to share the above solution with fellow developers.<\/p>\n\n\n\n
Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"
While developing a Magento 2 extension, you have to follow various requirements and one such that I’m posting the solution for is to add a…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-567","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=567"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/567\/revisions"}],"predecessor-version":[{"id":15295,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/567\/revisions\/15295"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}