Split button

Example

Show the markup

<div class="kit-cluster" data-gap="4">
  <div class="kit-split-button" role="group" aria-label="Save">
    <button class="kit-button" data-variant="primary" type="button">Save</button>
    <kit-menu placement="bottom-end"><button class="kit-button" data-variant="primary" data-icon aria-label="More save options"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg></button><div class="kit-menu-list"><button>Save as draft</button><button>Save and close</button><hr><button>Save a copy</button></div></kit-menu>
  </div>
  <div class="kit-split-button" role="group" aria-label="Export">
    <button class="kit-button" type="button">Export</button>
    <kit-menu placement="bottom-end"><button class="kit-button" data-icon aria-label="More export options"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg></button><div class="kit-menu-list"><button>Export as CSV</button><button>Export as PDF</button></div></kit-menu>
  </div>
</div>

Usage

<div class="kit-split-button" role="group" aria-label="Save">
  <button class="kit-button" data-variant="primary">Save</button>
  <kit-menu placement="bottom-end">
    <button class="kit-button" data-variant="primary" data-icon aria-label="More save options">…</button>
    <div class="kit-menu-list"><button>Save as draft</button><button>Save and close</button></div>
  </kit-menu>
</div>

The main button does the common thing; the arrow opens a menu of the alternatives, with all its keyboard support. Variants and sizes from the button apply to both halves.

Accessibility

Two real buttons in a named group: the main action, and a menu button whose name says what it opens ("More save options").
Keep the menu's items as variations on the main action; unrelated actions belong in their own menu.