Icons and separator in React Split button component

17 Mar 202510 minutes to read

SplitButton icons

SplitButton can have an icon to provide the visual representation of the action. To place the icon on a SplitButton, set the iconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the SplitButton. You can customize the icon’s position by using the iconPosition property

The following example illustrates how to place icon in SplitButton component.

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 = [
        {
            text: 'Cut',
        },
        {
            text: 'Copy',
        },
        {
            text: 'Paste',
        }
    ];
    return (<div>
      <SplitButtonComponent items={items} iconCss='e-sb-icons e-paste'>Paste</SplitButtonComponent>
      <SplitButtonComponent items={items} iconPosition="Top" 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[] = [
    {
        text: 'Cut',
    },
    {
        text: 'Copy',
    },
    {
        text: 'Paste',
    }];
  return (
  <div>
      <SplitButtonComponent items = {items} iconCss= 'e-sb-icons e-paste'>Paste</SplitButtonComponent>
      <SplitButtonComponent items = {items} iconPosition= "Top" iconCss= 'e-sb-icons e-paste'>Paste</SplitButtonComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element.
You can also use third party icons on the SplitButton using the iconCss property.

Vertical button

Vertical Button in SplitButton can be achieved by adding e-vertical class using cssClass property.

The following example illustrates how to vertical support in SplitButton component.

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 = [
        {
            text: 'Cut',
        },
        {
            text: 'Copy',
        },
        {
            text: 'Paste',
        }
    ];
    return (<div>
      <SplitButtonComponent cssClass='e-vertical' items={items} iconCss='e-sb-icons e-paste' iconPosition='Top'>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[] = [
    {
        text: 'Cut',
    },
    {
        text: 'Copy',
    },
    {
        text: 'Paste',
    }];
  return (
  <div>
      <SplitButtonComponent cssClass= 'e-vertical' items = {items} iconCss= 'e-sb-icons e-paste' iconPosition='Top'>Paste</SplitButtonComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element.
You can also use third party icons on the SplitButton using the iconCss property.

Separator

SplitButton component has Separator support. This can be achieved by setting separator as true.

The following example illustrates how to enable separator support in SplitButton component.

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'
        },
        {
            separator: true
        },
        {
            iconCss: 'e-sb-icons e-font',
            text: 'Font'
        },
        {
            iconCss: 'e-sb-icons e-paragraph',
            text: 'Paragraph'
        }
    ];
    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'
    },
    {
        separator: true
    },
    {
      iconCss: 'e-sb-icons e-font',
      text: 'Font'
    },
    {
      iconCss: 'e-sb-icons e-paragraph',
      text: 'Paragraph'
    }];
  return (
  <div>
      <SplitButtonComponent items = {items} iconCss= 'e-sb-icons e-paste'>Paste</SplitButtonComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

See Also