DEV Community

loading...
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.

Setup

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

Import

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) => {
                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>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

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} />
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide