Split button is basically a button with a default action and several other actions which are shown in a drop-down menu.
While there’s no doubt in how it functions, the issue is with how the default-action and more-actions icon should be highlighted in UI.
I have created basic variations of split buttons in below codepen.
In the above, both styles 1 & 2 are properly highlighted as a single group. But with style 3 user might mistake the more-actions arrow as separate button.
So the question is whether style 3 is valid or not ?
style 3 is used by Gmail in the mail list panel for selecting emails
If this is considered valid, kindly state the reason.
There’s no mention of this type of component in material design ( material.io )