Split button

The split button is the button component that can be especially useful in situations where there is limited screen space and one of the actions holds particular importance.

Component checklist

Design

Up to date

React

Up to date

Preview

A split button is a button that is made up of two parts. The left part is the default option, which is the most commonly used selection. The right part, which is represented by a caret icon, shows the rest of the available options. The purpose of a split button is to provide quick access to a default action while also presenting a list of related actions or options.

Usage - Preview

The split button is likely to be used less frequently than the menu button, as the additional actions it provides are more concealed compared to the menu button. However, this button can be especially useful in situations where there is limited screen space and one of the actions holds particular importance.

 

Notes

  • as a popover can be used dropdown menu or select

 

Resources