HelpBot Assistant

How can I help you?

Popup items in React Split button component

2 Mar 202612 minutes to read

Icons

Popup action items display icons or images to visually represent their associated actions. Set the iconCss property to e-icons with the appropriate icon CSS class for each menu item. By default, icons appear on the left side of the popup action item text.

In the following example, icons for Cut, Copy, and Paste menu items are configured using the iconCss property.

import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    let items = [
        {
            iconCss: 'e-sb-icons e-cut',
            text: 'Cut'
        },
        {
            iconCss: 'e-icons e-copy',
            text: 'Copy'
        },
        {
            iconCss: 'e-sb-icons e-paste',
            text: 'Paste'
        }
    ];
    return (<div>
      <SplitButtonComponent items={items} iconCss='e-sb-icons e-paste'>Paste</SplitButtonComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { ItemModel, SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render SplitButton.
function App() {

  let items: ItemModel[] = [
    {
      iconCss: 'e-sb-icons e-cut',
      text: 'Cut'
    },
    {
      iconCss: 'e-icons e-copy',
      text: 'Copy'
    },
    {
      iconCss: 'e-sb-icons e-paste',
      text: 'Paste'
    }];
  return (
  <div>
      <SplitButtonComponent items = {items} iconCss= 'e-sb-icons e-paste'>Paste</SplitButtonComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Template

Item Templating

Customize individual popup items using the beforeItemRender event. This event fires during each popup action item’s rendering phase, providing event arguments to identify the item and apply custom styles, content modifications, or conditional formatting based on your requirements.

import { createElement, enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    let items = [
        {
            text: 'Cut',
        },
        {
            text: 'Copy',
        },
        {
            text: 'Paste',
        }
    ];
    function itemBeforeEvent(args) {
        const shortCutSpan = createElement('span');
        const text = args.item.text;
        args.element.appendChild(shortCutSpan);
        shortCutSpan.setAttribute('class', 'shortcut');
        const clsName = (text === 'Copy') ? 'e-icons' : 'e-sb-icons';
        shortCutSpan.classList.add(clsName);
        (text === 'Cut') ? shortCutSpan.classList.add('e-cut') : (text === 'Paste') ? shortCutSpan.classList.add('e-paste') : shortCutSpan.classList.add('e-copy');
    }
    return (<div>
      <SplitButtonComponent items={items} beforeItemRender={itemBeforeEvent} iconCss='e-sb-icons e-paste'/>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { createElement, enableRipple } from '@syncfusion/ej2-base';
import { ItemModel, MenuEventArgs, SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render SplitButton.
function App() {

  let items: ItemModel[] = [
    {
        text: 'Cut',
    },
    {
        text: 'Copy',
    },
    {
        text: 'Paste',
    }];
  function itemBeforeEvent(args: MenuEventArgs): void {
      const shortCutSpan = createElement('span');
      const text = args.item.text;
      args.element.appendChild(shortCutSpan);
      shortCutSpan.setAttribute('class','shortcut');
      const clsName = (text === 'Copy') ? 'e-icons' : 'e-sb-icons';
      shortCutSpan.classList.add(clsName);
      (text === 'Cut') ? shortCutSpan.classList.add('e-cut') : (text === 'Paste') ? shortCutSpan.classList.add('e-paste') : shortCutSpan.classList.add('e-copy');
  }
  return (
  <div>
      <SplitButtonComponent items = {items} beforeItemRender= {itemBeforeEvent} iconCss= 'e-sb-icons e-paste'/>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Fully customize the entire popup structure and content by leveraging the target property to reference a custom template element. This approach allows you to implement complex popup layouts, nested menus, custom styling, or integration with other components while maintaining the SplitButton trigger behavior.

import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    return (<div>
        <div id='dropdowntarget'>
          <div id="first">
              <div id='black'/>
              <div id='red'/>
              <div id='green'/>
              <div id='gray'/>
              <div id='blue'/>
              <div id='violet'/>
              <div id='brown'/>
              <div id='darkgoldenrod'/>
              <div id='aquamarine'/>
          </div>
        </div>
        <SplitButtonComponent target='#dropdowntarget' iconCss='e-sb-icons e-color'/>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render SplitButton.
function App() {
    return (
    <div>
        <div id='dropdowntarget'>
          <div id= "first">
              <div id='black'/>
              <div id='red'/>
              <div id='green'/>
              <div id='gray'/>
              <div id='blue'/>
              <div id='violet'/>
              <div id='brown'/>
              <div id='darkgoldenrod'/>
              <div id='aquamarine'/>
          </div>
        </div>
        <SplitButtonComponent target='#dropdowntarget' iconCss= 'e-sb-icons e-color'/>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

See Also