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.
Discussion (0)