Is a split button valid without proper visual grouping

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 pen.

https://codepen.io/paulj05hua/full/PooayrP

-- edit -- Adding GIF ..

split-button-cases

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 ?

PS:

  • style 3 is used by Gmail in the mail list panel for selecting emails

    gmail-split-button-usage

    If this is considered valid, kindly state the reason.

  • There's no mention of this type of component in material design ( material.io )

Tags: