{"id":1283,"date":"2020-10-07T02:30:11","date_gmt":"2020-10-07T02:30:11","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/10\/07\/add-custom-button-in-admin-product-ui-component-form-in-magento-2\/"},"modified":"2025-07-23T17:31:03","modified_gmt":"2025-07-23T12:01:03","slug":"add-custom-button-in-admin-product-ui-component-form-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-button-in-admin-product-ui-component-form-in-magento-2\/","title":{"rendered":"How to Add Custom Button in the Admin Product UI-Component Form in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Magento 2&nbsp;allows the admin to create&nbsp;<a href=\"https:\/\/experienceleague.adobe.com\/en\/docs\/commerce-admin\/catalog\/introduction\" target=\"_blank\" rel=\"noreferrer noopener\">different product types&nbsp;<\/a>and edit them from the backend Catalog &gt; Products &gt; Product edit form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With innovations in E-commerce, the default features may not be enough to meet the business requirements. However, Magento 2 flexible to tweak or add new features, buttons, forms, or any components.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today, I\u2019ll show one such method to add a custom button in the admin product UI-component form in Magento 2. Likewise after done with this you can also learn to&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/create-a-custom-tab-and-call-custom-phtml-in-product-ui-component-form-in-magento-2\/\">create a custom tab and call custom Phtml in product UI component form<\/a>&nbsp;in Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using the below code, the admin can use custom buttons in the product edit form in the backend. For example, generate a barcode for the product, or check the preview of the product frontend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/10\/add-a-custom-button-in-the-admin-product-UI-component-form.png\" alt=\"add a custom button in the admin product UI-component form\" class=\"wp-image-10767\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Method to add custom button in the admin product UI-component form in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a&nbsp;<em><strong>product_form.xml<\/strong><\/em>&nbsp;file at &nbsp;<strong>app\/code\/Vendor\/Extension\/view\/adminhtml\/ui_component&nbsp;<\/strong>directory<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?>\n&lt;form xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\n    &lt;!--For custom button-->\n    &lt;argument name=\"data\" xsi:type=\"array\">\n        &lt;item name=\"buttons\" xsi:type=\"array\">\n            &lt;item name=\"customButton\" xsi:type=\"string\">\n                Vendor\\Extension\\Block\\Adminhtml\\Product\\Edit\\Button\\CustomButton\n            &lt;\/item>\n        &lt;\/item>\n    &lt;\/argument>\n&lt;\/form><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next you have to create a&nbsp;<em><strong>CustomButton.php<\/strong><\/em>&nbsp;file in&nbsp;<strong>app\/code\/Vendor\/Extension\/Block\/Adminhtml\/Product\/Edit\/Button<\/strong>&nbsp;directory<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\nnamespace Vendor\\Extension\\Block\\Adminhtml\\Product\\Edit\\Button;\n\nclass CustomButton extends \\Magento\\Catalog\\Block\\Adminhtml\\Product\\Edit\\Button\\Generic\n{\n    public function getButtonData()\n    {\n        return [\n            'label' => __('Custom Button'),\n            'class' => 'action-secondary',\n            'on_click' => 'alert(\"Hello World\")',\n            'sort_order' => 10\n        ];\n\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">add-custom-button-in-the-admin-product-ui-component-form-in-magento-2That\u2019s it. Also make sure to check <a href=\"https:\/\/meetanshi.com\/blog\/magento-product-save-button-not-working-in-admin-how-to-fix\/\">Magento product save button<\/a>, as if custom buttons are added, than customizations make many functions work and at the same time makes many things not work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, do share the solution with the Magento Community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2&nbsp;allows the admin to create&nbsp;different product types&nbsp;and edit them from the backend Catalog &gt; Products &gt; Product edit form. With innovations in E-commerce, the&#8230;<\/p>\n","protected":false},"author":19,"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-1283","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1283","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\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1283"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1283\/revisions"}],"predecessor-version":[{"id":19309,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1283\/revisions\/19309"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}