View in Storybook
Anatomy
SplitButton is a combination of a button and a menu. It groups related action items together into a Dropdown, but also offers one-click access to a default choice that doesn’t require opening the menu.
- Button: Uses the same props as our core Button.
- Icon button: Opens up our Dropdown where supporting actions are displayed.
Styles
Splitbutton is constructed on two Buttons side-by-side; one with a text label with optional iconLeft and the other as an Icon button, showing a chevron to indicate a dropdown menu.
Primary
Page-level actions use our primary Splitbutton, with the Filled variant being the recommended option to use so it matches other page call to actions.
Secondary
The secondary variant is for less important actions. These typcially sit within container such as Drawer.
Danger
Exclusively used when more than one destructive option is available to a user.
Behaviour
Loading
When a button has to initiate a loading state, the width of the button remains the same as it was with any text and icons displayed. The colour style changes to our disabled state as both the main text button and icon button are both non-clickable.
Usage
Splitbutton's accompanying context menu is revealed and positioned according to the guidance of all menus within the product. Depending on button's placement, we always align the menu to its edge. In this example it is to the right edge as the button is positioned to the top right of the screen.
Best practice
- Limit the overall number of choices available in a SplitButton menu.
- Avoid submenus within split buttons.
- Order the items within the menu by popularity or alphabetically.
- While icons are optional, a text label is always necessary in its menu.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Consider the placement of Splitbutton as this could affect it's context menu when displayed. |
🚫 Align a SplitButton menu to the opposite edge of the page. |
|
✅ Match the menu alignment. If a SplitButton is placed to the right of the screen, the subsequent menu should be aligned to the right also. |
🚫 Don’t align icons in a menu to the chevron icon in a SplitButton. |