Design
Component checklist
Up to date
React
Up to date
Preview
A split button has two parts. The left part is the default option, the most commonly used selection. The right part, represented by an icon-only button with a caret icon, shows the rest of the options in the dropdown menu. The purpose of a split button is to provide quick access to a default, primary action while presenting a list of related actions or options.
The split button is likely to be used less frequently than the menu button, as its additional actions are more concealed. However, this button can be handy when there is limited screen space, and one of the actions is particularly important.
Notes
- there should always be one action as a primary (visible with a label) and X secondary actions hidden under the dropdown menu
- as a popover can be used in the dropdown menu or select
Resources