variants
sizes
leading content
disabled
events
click to see events
link
form submission
Default type is now submit (native <button>
parity) — the leading segment submits the form and contributes its
name/value to FormData. The logged
event.submitter confirms the patched submitter (a
form-associated custom element can't be passed to
requestSubmit(submitter) directly, see
WICG/webcomponents#814). Check the box first to confirm a
click listener can still cancel the submit.
submit the form to see output
keyboard ripple
Click near the edge of the leading segment with the mouse, then Tab to it and press Space/Enter — the ripple must start from the center, not the earlier click position.
RTL
Sample usage
<!-- label + icon, opens a menu of related actions -->
<material-split-button variant="filled" label="Save" icon="save">
<material-menu-item label="Save"></material-menu-item>
<material-menu-item label="Save as…"></material-menu-item>
</material-split-button>
<!-- five sizes: xs | s (default) | m | l | xl -->
<material-split-button size="l" variant="tonal" label="Share" icon="share">
<material-menu-item label="Copy link"></material-menu-item>
</material-split-button>
<!-- four variants: filled | tonal | elevated | outlined -->
<material-split-button variant="outlined" label="More">...</material-split-button>
<!-- icon-only leading; supply aria-label -->
<material-split-button icon="favorite" aria-label="Favorite">...</material-split-button>
<!-- leading as link -->
<material-split-button label="Docs" href="/docs">...</material-split-button>
<!-- events -->
<!-- splitAction: fires when leading is clicked -->
<!-- splitMenuOpen: fires when the menu opens -->
<!-- splitMenuClose: fires when the menu closes -->