HelpBot Assistant

How can I help you?

Icons and separator in React Split button component

2 Mar 202611 minutes to read

SplitButton icons

Display visual icons in SplitButton to enhance action recognition and improve user experience. Set the iconCss property with e-icons class and appropriate icon CSS to render icons from Syncfusion’s built-in icon library. By default, icons appear on the left side of the button text; use the iconPosition property to position icons to the right, top, or bottom.

The following example demonstrates how to add icons to the 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

Create a vertical button layout in SplitButton by applying the e-vertical class through the cssClass property. This orientation stacks the icon and text vertically, useful for compact toolbar layouts or custom UI designs requiring vertical button arrangements.

The following example demonstrates how to enable vertical button support in the 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

Add visual separators between popup menu items to group related actions and improve readability. Enable separators by setting the separator property to true on individual menu items, creating visual dividers that organize popup content hierarchically.

The following example demonstrates how to enable separators in SplitButton popup items.

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