DEV Community

Cover image for React SplitButton

React SplitButton

primetek profile image PrimeTek ・2 min read

React SplitButton groups a set of commands in an overlay with a default command.


Refer to PrimeReact setup documentation for download and installation steps for your environment.


import {SplitButton} from 'primereact/splitbutton';
Enter fullscreen mode Exit fullscreen mode

Getting Started

SplitButton has a default command button and a collection of additional options defined by the model property.

export const SplitButtonDemo = () => {

    const items = [
            label: 'Update',
            icon: 'pi pi-refresh',
            command: (e) => {
      {severity:'success', summary:'Updated', detail:'Data Updated'});
            label: 'Delete',
            icon: 'pi pi-times',
            command: (e) => {
      { severity: 'success', summary: 'Delete', detail: 'Data Deleted' });
            label: 'React Website',
            icon: 'pi pi-external-link',
            command:(e) => {
                window.location.href = ''
        {   label: 'Upload',
            icon: 'pi pi-upload',
            command:(e) => {
                window.location.hash = "/fileupload"

    const save = () => {{severity: 'success', summary: 'Success', detail: 'Data Saved'});

        return (
            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items}></SplitButton>
Enter fullscreen mode Exit fullscreen mode

MenuModel API

SplitButton uses the common MenuModel API to define the items, visit MenuModel API for details.


Different color options are available as severity levels.

  • .p-button-secondary
  • .p-button-success
  • .p-button-info
  • .p-button-warning
  • .p-button-danger
<SplitButton label="Primary" />
<SplitButton label="Secondary" className="p-button-secondary" model={items} />
<SplitButton label="Success" className="p-button-success" model={items} />
<SplitButton label="Info" className="p-button-info" model={items} />
<SplitButton label="Warning" className="p-button-warning" model={items} />
<SplitButton label="Danger" className="p-button-danger" model={items} />
Enter fullscreen mode Exit fullscreen mode


SplitButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeReact SplitButton showcase for demos and documentation.

Discussion (0)

Editor guide