How to Add Custom Button in the Admin Product UI-Component Form in Magento 2

Magento 2 allows the admin to create different product types and edit them from the backend Catalog > Products > Product edit form.

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.

Today, I’ll 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 create a custom tab and call custom Phtml in product UI component form in Magento 2.

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.

For example,

Method to add custom button in the admin product UI-component form in Magento 2:

Create a product_form.xml file at  app/code/Vendor/Extension/view/adminhtml/ui_component directory

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <!--For custom button-->
    <argument name="data" xsi:type="array">
        <item name="buttons" xsi:type="array">
            <item name="customButton" xsi:type="string">
                Vendor\Extension\Block\Adminhtml\Product\Edit\Button\CustomButton
            </item>
        </item>
    </argument>
</form>

Next you have to create a CustomButton.php file in app/code/Vendor/Extension/Block/Adminhtml/Product/Edit/Button directory

<?php

namespace Vendor\Extension\Block\Adminhtml\Product\Edit\Button;

class CustomButton extends \Magento\Catalog\Block\Adminhtml\Product\Edit\Button\Generic
{
    public function getButtonData()
    {
        return [
            'label' => __('Custom Button'),
            'class' => 'action-secondary',
            'on_click' => 'alert("Hello World")',
            'sort_order' => 10
        ];

    }
}

add-custom-button-in-the-admin-product-ui-component-form-in-magento-2That’s it. Also make sure to check Magento product save button, as if custom buttons are added, than customizations make many functions work and at the same time makes many things not work.

Also, do share the solution with the Magento Community via social media.

Thank you.