{"id":26041,"date":"2026-03-06T18:00:00","date_gmt":"2026-03-06T12:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=26041"},"modified":"2026-03-06T17:05:35","modified_gmt":"2026-03-06T11:35:35","slug":"how-to-add-custom-button-magento-2-admin-ui-component-form-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-custom-button-magento-2-admin-ui-component-form-2\/","title":{"rendered":"How to Add a Custom Button to Magento 2 Admin UI Component Form (Step-by-Step)"},"content":{"rendered":"\n

You require specialized workflows that go beyond default functionality.<\/p>\n\n\n\n

One of them is adding a custom button to Magento 2 Admin UI component form.  <\/p>\n\n\n\n

It helps to streamline complex tasks such as syncing products with third-party APIs, triggering custom price calculations, or sending a product through an approval workflow.<\/p>\n\n\n\n

Here are the simple steps to adding a custom button to trigger these backend processes directly from the admin interface.<\/p>\n\n\n\n

Steps to Add a Custom Button to Magento 2 Admin UI Component Form<\/h2>\n\n\n\n

We will create a Generate Custom SKU button. <\/p>\n\n\n\n

Step 1: Create UI Component XML<\/h3>\n\n\n\n

Use the code below in the product_form.xml<\/strong><\/p>\n\n\n\n

File located at  app\/code\/Vendor\/Module\/view\/adminhtml\/ui_component<\/strong><\/p>\n\n\n\n

<?xml version=\"1.0\"?>\n<form xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\n\n    <settings>\n        <buttons>\n            <button name=\"generate_custom_sku\"\n                    class=\"Vendor\\Module\\Block\\Adminhtml\\Product\\Edit\\Button\\GenerateSku\"\/>\n        <\/buttons>\n    <\/settings>\n\n<\/form>\n<\/pre>\n\n\n\n
Step 2: Create a button in the GenerateSku.php file<\/h3>\n\n\n\n
Create the GenerateSku.php file at the location app\/code\/Vendor\/Module\/Block\/Adminhtml\/Product\/Edit\/Button and use the code below:<\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\Adminhtml\\Product\\Edit\\Button;\n\nuse Magento\\Framework\\View\\Element\\UiComponent\\Control\\ButtonProviderInterface;\nuse Magento\\Framework\\Registry;\n\nclass GenerateSku implements ButtonProviderInterface\n{\n    protected $registry;\n\n    public function __construct(\n        Registry $registry\n    ) {\n        $this->registry = $registry;\n    }\n\n    public function getButtonData()\n    {\n        $product = $this->registry->registry('current_product');\n\n        if (!$product || !$product->getId()) {\n            return [];\n        }\n\n        return [\n            'label' => __('Generate Custom SKU'),\n            'class' => 'primary',\n            'on_click' => \"setLocation('your_custom_controller_url_here')\",\n            'sort_order' => 90,\n        ];\n    }\n}\n<\/pre>\n\n\n\n
Step 3: View the Button on Product Edit Page <\/h3>\n\n\n\n
Now, you can clear the cache and check the product edit page. Your new custom button will appear in the top-right corner of the product Edit page, like the one below:<\/p>\n\n\n\n
\"Custom<\/figure>\n\n\n\n
That\u2019s all!
<\/p>\n\n\n\n
Adding a custom button to the Magento 2 admin UI component form is a clean and scalable way to extend functionality without modifying core files.<\/p>\n","protected":false},"excerpt":{"rendered":"
You require specialized workflows that go beyond default functionality. One of them is adding a custom button to Magento 2 Admin UI component form.   It…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-26041","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26041","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=26041"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26041\/revisions"}],"predecessor-version":[{"id":26045,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/26041\/revisions\/26045"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=26041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=26041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=26041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}