Source: https://primereact.org/splitbutton/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

SplitButton

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

Import#

---

import { SplitButton } from 'primereact/splitbutton';
         

Copy

Basic#

---

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
         

Copy

Icons#

---

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
         

Copy

Severity#

---

Severity defines the type of button.

Save 

Save 

Save 

Save 

Save 

Save 

Save 

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
         

Copy

Loading#

---

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} loading={loading} />
         

Copy

Disabled#

---

When disabled is present, the element cannot be edited and focused.

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
         

Copy

Raised#

---

Raised buttons display a shadow to indicate elevation.

Save 

Save 

Save 

Save 

Save 

Save 

Save 

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
         

Copy

Rounded#

---

Rounded buttons have a circular border radius.

Save 

Save 

Save 

Save 

Save 

Save 

Save 

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
         

Copy

Text#

---

Text buttons are displayed as textual elements.

Save 

Save 

Save 

Save 

Save 

Save 

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
         

Copy

Raised Text#

---

Text buttons can be displayed as raised as well for elevation.

Save 

Save 

Save 

Save 

Save 

Save 

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
         

Copy

Outlined#

---

Outlined buttons display a border without a background initially.

Save 

Save 

Save 

Save 

Save 

Save 

Save 

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
         

Copy

Sizes#

---

SplitButton provides small and large sizes as alternatives to the standard.

Save 

Save 

Save 

<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
         

Copy

Template#

---

SplitButton has a label and icon properties that allows to define the main button.

Prime React 

<Toast ref={toast}></Toast>
<SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
         

Copy

Accessibility#

---

Screen Reader

SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps. Dropdown button requires an explicit definition to describe it using menuButtonProps option and also includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button.

The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button.

<SplitButton buttonProps={{'aria-label': 'Default Action'}} menuButtonProps={{'aria-label': 'More Options'}} />
 

Copy

Main Button Keyboard Support

| Key | Function | | --- | --- | | enter | Activates the button. | | space | Activates the button. |

Menu Button Keyboard Support

| Key | Function | | --- | --- | | enter | Toggles the visibility of the menu. | | space | Toggles the visibility of the menu. | | down arrow | Opens the menu and moves focus to the first item. | | up arrow | Opens the menu and moves focus to the last item. |

Menu Keyboard Support

| Key | Function | | --- | --- | | enter | Actives the menuitem, closes the menu and sets focus on the menu button. | | escape | Closes the menu and sets focus on the menu button. | | down arrow | Moves focus to the next item, if it is the last one then first item receives the focus. | | up arrow | Moves focus to the previous item, if it is the first one then last item receives the focus. | | home | Moves focus to the first item. | | end | Moves focus to the last item. |

• Import

• Basic

• Icons

• Severity

• Loading

• Disabled

• Raised

• Rounded

• Text

• Raised Text

• Outlined

• Sizes

• Template

• Accessibility

PrimeReact 10.9.7 by PrimeTek