---
title: "How To Add Split Button on Admin Page in Magento 2"
url: "https://dolphinwebsolution.com/how-to-add-split-button-on-admin-page"
date: "2021-10-27T15:47:12+05:30"
modified: "2023-08-25T09:04:14+05:30"
author:
  name: "Jigar Patel"
categories:
  - "Magento"
word_count: 642
reading_time: "4 min read"
summary: "How to Add Split Button on Admin Sales Invoice View Page In Magento 2. A split button is a UI component. Buttons are calls to action, and their labels should be limited to three words (four words m..."
description: "How to Add Split Button on Admin Sales Invoice View Page In Magento 2. A split button is a UI component. Buttons are calls to action, and their labels should..."
keywords: "Add Split Button on admin,invoice view page,split button ui component,custom button, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Add WYSIWYG Editor in System Configurations Magento 2"
    url: "https://dolphinwebsolution.com/how-to-add-wysiwyg-editor-in-system-configurations-magento-2"
  - title: "How to Display swatches instead of labeled product options on Checkout in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-display-swatches-instead-of-labeled-product-options-on-checkout-in-magento-2"
  - title: "How to use slick carousel slider in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-use-slick-carousel-slider-in-magento-2"
---

# How To Add Split Button on Admin Page in Magento 2

_Published: October 27, 2021_  
_Author: Jigar Patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/How-To-Add-Split-Button-on-Admin-Page-in-Magento-2-1024x536.png)

How to Add Split Button on Admin Sales Invoice View Page In Magento 2. A split button is a UI component. Buttons are calls to action, and their labels should be **limited** to three words (four words maximum, if including a short verb or word).

**Buttons** can be used for:

- Calls to action for task flows: to begin, continue, or submit a task
- Navigation in featured modules of content, like banners and content teasers

Button types are primary, secondary, and tertiary. Each page should have a maximum limit of one primary button. **Split buttons** include multiple actions. Button counts in a Button Bar or any array of buttons should be limited to four buttons, maximum then the user can select the displayed option or any other option from the drop-down list. The drop-down list shows the options that are very rarely used.

Sometimes, the Magento 2 store has a need to add a split button in the admin sales invoice view page without changing core Magento functionalities.

**Read this:** [How to Add Custom Button to Admin Sales Invoice View in Magento 2.](https://dolphinwebsolution.com/add-custom-button-to-admin-sales-invoice-view-in-magento-2)

### Steps to Add Split Button on Admin Sales Invoice View Page in Magento 2

We are already learned [how to create a basic module in Magento 2](https://dolphinwebsolution.com/how-to-create-module-in-magento-2). We need to create **module.xml** and **registration.php** files. You can create **module.xml** and **registration.php** from this tutorial.

#### Step 1: Create Dependency injection (di.xml)
Now we create Dependency injection file **di.xml** in **app/code/Dolphin/InvoiceEmail/etc/adminhtml** folder with the following code.

```
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Sales\Block\Adminhtml\Order\Invoice\View">
        <plugin name="Dolphin_InvoiceEmail_Order_View" type="Dolphin\InvoiceEmail\Plugin\Adminhtml\Order\Invoice\View" sortOrder="10" disabled="false"/>
    </type>
</config>
```

#### Step 2: Create plugin class
Finally, add in the Plugin class. As with the default sales invoice view plugin, a **beforeSetLayout**() method is defined, and the invoice view is added as part of the **\\Magento\\Sales\\Block\\Adminhtml\\Order\\Invoice\\View**.

Create plugin class file **View.php** in **app/code/Dolphin/InvoiceEmail/Plugin/Adminhtml/Order/Invoice** folder with the following code.

```
<?php
namespace Dolphin\InvoiceEmail\Plugin\Adminhtml\Order\Invoice;

use Magento\Backend\Model\UrlInterface;
use Magento\Framework\ObjectManagerInterface;

class View
{
    protected $object_manager;
    protected $_backendUrl;

    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        ObjectManagerInterface $om,
        UrlInterface $backendUrl,
        array $data = []
    ) {
        $this->object_manager = $om;
        $this->_backendUrl = $backendUrl;
    }

    public function beforeSetLayout(\Magento\Sales\Block\Adminhtml\Order\Invoice\View $view)
    {
        if ($view->getInvoice()->getId()) {
            $addButtonProps = [
                'id' => 'test',
                'label' => __('Split Button'),
                'class' => 'add',
                'button_class' => '',
                'class_name' => 'Magento\Backend\Block\Widget\Button\SplitButton',
                'options' => $this->getCustomActionListOptions(),
            ];

            $view->addButton('test',$addButtonProps);
            $view->removeButton('send_notification');
        }

    }
    protected function getCustomActionListOptions()
    {
        $url = $this->_backendUrl->getUrl('');
        $splitButtonOptions=[
            'button_1'=>['label'=>__('Button 1'),'onclick'=>'setLocation(\'' . $url . '\')'],
            'button_2'=>['label'=>__('Button 2'),'onclick'=>'setLocation(\'' . $url . '\')'],
            'button_3'=>['label'=>__('Button 3'),'onclick'=>'setLocation(\'' . $url . '\')']
        ];
        return $splitButtonOptions;
    }

}
```

**$view->addButton:** Selector for the element used for item adding.

**$view->removeButton:** Selector for the element used for item removing.

Now execute below command and referesh the page:

```
[dt_highlight color="" text_color="" bg_color=""]php bin/magento s:up[/dt_highlight]
[dt_highlight color="" text_color="" bg_color=""]php bin/magento s:s:d -f[/dt_highlight]
[dt_highlight color="" text_color="" bg_color=""]php bin/magento c:c[/dt_highlight]
```

**Result:**

![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2021/10/split-btn-e1635179680158-1024x222.png)

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

I’m here to help.

**Thank you!**


---

_View the original post at: [https://dolphinwebsolution.com/how-to-add-split-button-on-admin-page](https://dolphinwebsolution.com/how-to-add-split-button-on-admin-page)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:53:24 UTC_