Reading list Switch to dark mode

    How to create a Button in Configuration Section in Magento 2

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

    Button will looks like as displayed in image.

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

    <config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
            <tab id="webkul" translate="label" sortOrder="10">
            <section id="demomanagement" translate="label" type="text" sortOrder="305" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Demo Management</label>
                <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">

    2. Now create a frontend_model that we have defined in system.xml

    namespace Webkul\Addbutton\Block\System\Config\Form;
    use Magento\Framework\App\Config\ScopeConfigInterface;
    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()
            if (!$this->getTemplate()) {
            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
            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)
            //$originalData = $element->getOriginalData();
                    'id'        => 'addbutton_button',
                    'button_label' => __('New Button'),
                    'onclick'   => 'javascript:check(); return false;'
            return $this->_toHtml();

    Now lets create a button.phtml

    Searching for an experienced
    Magento 2 Company ?
    Read More
    <div class="pp-buttons-container">
        <button id="<?php echo $block->getId() ?>" onclick="return false;">
            <span><span><span><?php echo $block->escapeHtml($block->getButtonLabel()); ?></span></span></span>

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

    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • Justin
    So I have all this working, but the thing I’m trying to do with this is download a file via a button in the module configuration. When I click this button no file is downloaded, but if I extract the ajax url being called and enter it into a new tab, it works fine. Am I missing something in the phtml file that would let me be able to download a file?
  • Back to Top
    Great solution and the techs are very knowledgeable and helpful. Especially Nishi and Abhishek.
    Ann Beattie
    Senior Salesforce Consultant
    Talk to Sales


    Live Chat

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home