Split button
A button with a small arrow attached: the big part does the default thing, the arrow opens related variants of it.
See it
What it is
A split button is one control with two hit targets: a big main area that fires the most common action immediately, and a narrow caret area that opens a menu of sibling actions. Think 'Merge pull request' on GitHub with its squash and rebase alternates, or Word's Paste button with paste-as-text tucked behind the arrow.
Reach for it when one action wins the vast majority of clicks but the alternates are close relatives of it, not unrelated commands. If the menu items are a grab bag (rename, duplicate, delete), you want an overflow menu instead. If no single option dominates, use a plain dropdown menu where clicking anywhere opens the list.
Gotcha: the two targets need a visible divider and separate hover states, or people will click the main half expecting the menu and trigger a real action by accident. On touch the caret often ends up under the 44px minimum, so widen it rather than shrinking it, and give the caret its own accessible label like 'More save options' since a bare arrow reads as nothing to a screen reader.
Ask AI for it
Build a split button: a single rounded control divided into two hit targets by a 1px divider. The left segment is the primary action label ('Save') and fires immediately on click. The right segment is a narrow caret-only trigger (minimum 44px wide on touch) that opens an anchored dropdown of related alternates ('Save as draft', 'Save and duplicate'). Give each segment its own hover and focus ring, share one border radius across the pair, put aria-haspopup='menu' and an explicit aria-label on the caret, and close the menu on Escape, outside click, and selection.