toc

Split button

A split button pairs a main action with a trailing button that opens a menu of related actions.

<md-gb-split-button>
  <button slot="leading">Save</button>
  <button slot="trailing" aria-label="More save options" popovertarget="save-menu"></button>
  <md-gb-menu id="save-menu">
    <md-gb-menu-item>Save as copy</md-gb-menu-item>
    <md-gb-menu-item>Save as template</md-gb-menu-item>
  </md-gb-menu>
</md-gb-split-button>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-split-button.json (setup)

Usage guidelines

Link to “Usage guidelines”

One main action plus related ones. The leading button runs the most common action, and the menu holds the alternatives.
Same sizes as buttons. Split buttons come in the five button sizes, so they can sit next to buttons and icon buttons of the same size.
Trailing menu icon. The trailing button always shows the menu icon. Its color doesn't change when the menu opens; it only turns.

Anatomy

Link to “Anatomy”

A split button holds a leading button, a trailing button and the menu the trailing button opens.

<md-gb-split-button>
  <button slot="leading">
    <md-gb-icon>send</md-gb-icon>
    Send
  </button>
  <button slot="trailing" aria-label="More send options" popovertarget="anatomy-menu"></button>
  <md-gb-menu id="anatomy-menu">
    <md-gb-menu-item>Send later</md-gb-menu-item>
    <md-gb-menu-item>Schedule send</md-gb-menu-item>
  </md-gb-menu>
</md-gb-split-button>

Examples

Link to “Examples”

Colors

Link to “Colors”

Split buttons are filled by default. Set color to elevated, tonal or outlined.

<md-gb-split-button color="tonal">
  <button slot="leading">Reply</button>
  <button slot="trailing" aria-label="More reply options" popovertarget="reply-menu"></button>
  <md-gb-menu id="reply-menu">
    <md-gb-menu-item>Reply all</md-gb-menu-item>
    <md-gb-menu-item>Forward</md-gb-menu-item>
  </md-gb-menu>
</md-gb-split-button>

Sizes

Link to “Sizes”

Set size to xs, sm (the default), md, lg or xl.

<md-gb-split-button size="lg">
  <button slot="leading">Send</button>
  <button slot="trailing" aria-label="More send options" popovertarget="send-menu"></button>
  <md-gb-menu id="send-menu">
    <md-gb-menu-item>Send later</md-gb-menu-item>
    <md-gb-menu-item>Schedule send</md-gb-menu-item>
  </md-gb-menu>
</md-gb-split-button>

Leading icon

Link to “Leading icon”

The leading button can have an icon, a label, or both.

<md-gb-split-button>
  <button slot="leading">
    <md-gb-icon>download</md-gb-icon>
    Download
  </button>
  <button slot="trailing" aria-label="More download options" popovertarget="download-menu"></button>
  <md-gb-menu id="download-menu">
    <md-gb-menu-item>Download as PDF</md-gb-menu-item>
    <md-gb-menu-item>Download as text</md-gb-menu-item>
  </md-gb-menu>
</md-gb-split-button>

Accessibility

Link to “Accessibility”

Both parts are native <button>s you provide, so give the trailing button an aria-label that says what the menu holds, such as "More save options". Add one to an icon-only leading button too.
The two buttons are separate tab stops. The trailing button toggles the menu with popovertarget, and the menu follows the menu keyboard behavior.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked68% tokens

98 of 155 buildable spec units are tested, 3 are excluded with a written reason and 0 are uncovered (the target is 0). 36 of 53 token declarations match the spec (68%), and 17 have no spec token.

split-button on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

Anchor positioning (opens in a new tab) Limited availability used inside an @supports guard

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passButton

Roles the component renders: button (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Button (opens in a new tab).

1 rendered state run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse99 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Eliminate render-blocking resources
Minify JavaScript
Reduce unused CSS
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-split-button>

Link to “<md-gb-split-button>”

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`color`	`color`	`SplitButtonColor`	`'filled'`
`selected`	`selected`	`boolean`	`false`
`size`	`size`	`SplitButtonSize`	`'sm'`

Slots

Link to “Slots”

Slot	Description
default	Used to render the trailing button's popover menu.
`leading`	Requires a `<button>` for the main action.
`trailing`	Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.

CSS parts

Link to “CSS parts”

Part	Description
`::part(leading-btn)`	The split button's main action.
`::part(split-btn)`	The split button's root element.
`::part(trailing-btn)`	The split button's menu action.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--between-space`
`--icon-size`
`--inner-corner-size`
`--leading-space`
`--outer-corner-size`
`--trailing-space`