Customization

The SplitButton provides options for customizing the behavior of the popup and the rendering of the popup items.

The component enables you to:

Popup Behavior

To configure the behavior of the popup, use the animate and popupClass settings.

<style>
  .my-popup {
      font-style: oblique
  }
</style>
const items=['Reply All', 'Forward', 'Reply & Delete'];
class App extends React.Component {
    render() {
        return (
            <div>
                <SplitButton popupSettings={{animate: false, popupClass: 'my-popup'}} items={items} text="Reply" />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Items Rendering

To override the default rendering of all popup items, use the itemRender property of the SplitButton. You can override the rendering of an individual item through its render property.

const itemRender = (props) => {
    return (
        <em>{`action #${props.itemIndex}: ${props.item.text}`}</em>
    );
};
const items = [
    { text: 'Save as' },
    {
        text: 'Upload to drive',
        render: props => <strong>{props.item.text} {props.itemIndex}</strong>
    }
];
class App extends React.Component {
    render() {
        return (
            <div>
                <SplitButton
                    itemRender={itemRender}
                    items={items}
                    text="Save"
                />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /