SplitButton

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

Basic

Severities

Raised Buttons

Rounded Buttons

Text Buttons

Raised Text Buttons

Outlined Buttons

Sizes

Import via Module


import { SplitButton } from 'primereact/splitbutton';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/splitbutton/splitbutton.min.js"></script>

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

Raised and Rounded Buttons

SplitButton can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.


<SplitButton label="Proceed" className="p-button-raised p-button-rounded" model={items} />

Properties

Name	Type	Default	Description
id	string	null	Identifier of the component.
label	string	null	Text of the button.
icon	string	null	Name of the icon.
model	object	null	MenuModel instance to define the overlay items.
disabled	boolean	false	When present, it specifies that the component should be disabled.
visible	boolean	true	When present, it specifies that the element should be visible.
style	string	null	Inline style of the component.
className	string	null	ClassName of the component.
buttonClassName	string	null	ClassName of the button.
menuStyle	string	null	Inline style of the overlay menu.
menuClassName	string	null	ClassName class of the overlay menu.
menuButtonClassName	string	null	ClassName of the menu dropdown button.
buttonProps	string	null	Props for the main button, any prop is passed implicity to the button element.
menuButtonProps	string	null	Props for the dropdown button, any prop is passed implicity to the dropdown button element.
tabIndex	number	null	Index of the element in tabbing order.
appendTo	DOM element \| string	document.body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.
buttonTemplate	any	null	Template of the default button.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
dropdownIcon	string	pi pi-chevron-down	Icon class of the dropdown icon.
loading	boolean	false	Display loading icon of the button
loadingIcon	any	null	Name of the loading icon or JSX.Element for loading icon.

Events

Name	Parameters	Description
onClick	event: Browser event	Callback to invoke when main button is clicked.
onShow	-	Callback to invoke when overlay panel becomes visible.
onHide	-	Callback to invoke when overlay panel becomes hidden.