---
title: "Add Buttons into Ui Component  Form Magento 2"
url: "https://dolphinwebsolution.com/add-buttons-into-ui-component-form-magento-2"
date: "2021-04-13T05:17:33+05:30"
modified: "2023-08-31T05:07:48+05:30"
author:
  name: "Mahesh Makwana"
categories:
  - "Magento"
word_count: 659
reading_time: "4 min read"
summary: "We learn how to add Buttons into Custom ui component form Magento 2.

There are many types of buttons In the Form like Save, Edit, Back, Delete, New, etc. In developing the module we need to add ..."
description: "We learn how to add Buttons into Custom Ui Component Form Magento 2. There are many types of buttons In the Form like Save, Edit, Back, Delete, New, etc"
keywords: "component form magento 2,ui component magento 2,find component form,add button into ui component,create ui component form magento 2,ui component form magento 2, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Top 5 Best Magento Development Companies in USA (2026)"
    url: "https://dolphinwebsolution.com/blog/best-magento-development-companies-in-usa/"
  - title: "How to Add Custom Product Image Role in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-add-custom-product-image-role-in-magento-2"
  - title: "Download Files in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-download-files-in-magento-2"
---

# Add Buttons into Ui Component Form Magento 2

_Published: April 13, 2021_  
_Author: Mahesh Makwana_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/Buttons-into-UI-1024x512.jpg)

We learn how to add Buttons into Custom ui component form Magento 2.

There are many types of buttons In the Form like **Save, Edit, Back, Delete, New,** etc. In[ developing the module](https://dolphinwebsolution.com/how-to-create-module-in-magento-2) we need to add a button to the form. Here is some code to add different buttons to the form. Contact Dolphin Web Solution for[ **hire magento 2 developers**](https://dolphinwebsolution.com/hire-magento-2-developers/).

### Step-1: Create Generic.php
Create **Generic.php** at **app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button**

```
<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

use Magento\Backend\Block\Widget\Context;
use Magento\Cms\Api\PageRepositoryInterface;

class Generic
{
    protected $context;
    protected $pageRepository;

    public function __construct(
        Context $context,
        PageRepositoryInterface $pageRepository
    ) {
        $this->context = $context;
        $this->pageRepository = $pageRepository;
    }

    public function getUrl($route = '', $params = [])
    {
        return $this->context->getUrlBuilder()->getUrl($route, $params);
    }
}
```

### Step-2:** Create **Back.php
Create [**Back.php**](https://developer.adobe.com/commerce/php/development/) at **app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button**

```
<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

class Back extends Generic implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Back'),
            'on_click' => sprintf("location.href = '%s';", $this->getBackUrl()),
            'class' => 'back',
            'sort_order' => 10,
        ];
    }

    public function getBackUrl()
    {
        return $this->getUrl('*/*/');
    }
}
```

### Step-3: Create Reset.php
Create **Reset.php** at **app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button**

```
<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

class Reset implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Reset'),
            'class' => 'reset',
            'on_click' => 'location.reload();',
            'sort_order' => 30,
        ];
    }
}
```

### Step-4: Create Delete.php
Create **Delete.php** at **app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Buttons**

```
<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

use Magento\Backend\Block\Widget\Context;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;

class Delete extends Generic implements ButtonProviderInterface
{
    protected $context;

    public function __construct(
        Context $context
    ) {
        $this->context = $context;
    }

    public function getButtonData()
    {
        $data = [];
        $id = $this->context->getRequest()->getParam('id');
        if ($id) {
            $data = [
                'label' => __('Delete'),
                'class' => 'delete',
                'on_click' => 'deleteConfirm(\'' . __(
                    'Are you sure you want to delete this?'
                ) . '\', \'' . $this->getDeleteUrl() . '\')',
                'sort_order' => 20,
            ];
        }
        return $data;
    }

    public function getDeleteUrl()
    {
        $id = $this->context->getRequest()->getParam('id');
        return $this->getUrl('*/*/delete', ['id' => $id]);
    }
}
```

### Step-5: Create Save.php
Create **Save.php** at **app/code/Dolphin/AddButtonModule/Block/Adminhtml/Edit/Button**

```
<?php

namespace Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Ui\Component\Control\Container;

class Save extends Generic implements ButtonProviderInterface
{
    public function getButtonData()
    {
        return [
            'label' => __('Save'),
            'class' => 'save primary',
            'data_attribute' => [
                'mage-init' => [
                    'buttonAdapter' => [
                        'actions' => [
                            [
                                'targetName' => 'your_form_ui_component_name.your_form_ui_component_name',
                                'actionName' => 'save',
                                'params' => [
                                    false,
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ];
    }

}
```

### Step-6: In your Form Ui-Component file
**In your Form Ui-Component file at app/code/Dolphin/AddButtonModule/view/adminhtml/ui\_component add below code:**

```
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        ............................................................................................................
        <item name="buttons" xsi:type="array">
            <item name="back" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Back</item>
            <item name="delete" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Delete</item>
            <item name="reset" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Reset</item>
            <item name="save" xsi:type="string">Dolphin\AddButtonModule\Block\Adminhtml\Edit\Button\Save</item>
        </item>
        ............................................................................................................
    </argument>
    ................................................................................................................
</form>
```

After adding the above files you can show button into your custom form.

You may also like this: [Dependent Fields In UI-Component Forms In Magento 2](https://dolphinwebsolution.com/dependent-fields-in-ui-component-forms-in-magento-2)

I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.


---

_View the original post at: [https://dolphinwebsolution.com/add-buttons-into-ui-component-form-magento-2](https://dolphinwebsolution.com/add-buttons-into-ui-component-form-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:53:42 UTC_