Component reference

Split Button

Material 3 Expressive Split Button component for dual-action interactions.

Material 3Web ComponentFramework agnostic

Interactive Demo

Send

Schedule send

Save draft

Send test

Last interaction: None

<div class="split-button-demo">
  <m3-split-button open>
    Send
    <m3-menu slot="menu" placement="bottom-end">
    <m3-menu-item value="schedule-send">Schedule send</m3-menu-item>
    <m3-menu-item value="save-draft">Save draft</m3-menu-item>
    </m3-menu>
  </m3-split-button>
</div>

♿ Accessibility

Keyboard: Arrow keys, Home, and End open and enter the menu.
Focus: Escape and outside click return focus to the menu trigger.
ARIA: The trigger exposes a real aria-controls relationship.