React SplitButton

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

Setup

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

Import

import {SplitButton} from 'primereact/splitbutton';

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) => {
                toast.current.show({severity:'success', summary:'Updated', detail:'Data Updated'});
            }
        },
        {
            label: 'Delete',
            icon: 'pi pi-times',
            command: (e) => {
                toast.current.show({ severity: 'success', summary: 'Delete', detail: 'Data Deleted' });
            }
        },
        {
            label: 'React Website',
            icon: 'pi pi-external-link',
            command:(e) => {
                window.location.href = 'https://facebook.github.io/react/'
            }
        },
        {   label: 'Upload',
            icon: 'pi pi-upload',
            command:(e) => {
                window.location.hash = "/fileupload"
            }
        }
    ]

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

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

MenuModel API

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

Severity

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} />

Theming

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

Resources

Visit the PrimeReact SplitButton showcase for demos and documentation.