Split Button

A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.

Overview

API

Usage

The split button combines a default action button with a dropdown menu for additional actions. Click the primary area to trigger the default action, or click the dropdown arrow to reveal more options.

Save Save as draft

Save and publish

Save as template


  <wc-split-button>
    Save
    <wc-menu-item slot="menu">Save as draft</wc-menu-item>
    <wc-menu-item slot="menu">Save and publish</wc-menu-item>
    <wc-menu-item slot="menu">Save as template</wc-menu-item>
  </wc-split-button>

Variants

The split button supports filled, tonal, and outlined variants, following M3 Material Design guidelines.

Filled Option A

Option B

Tonal Option A

Option B

Outlined Option A

Option B


  <wc-split-button variant="filled">
    Filled
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-split-button>

  <wc-split-button variant="tonal">
    Tonal
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-split-button>

  <wc-split-button variant="outlined">
    Outlined
    <wc-menu-item slot="menu">Option A</wc-menu-item>
    <wc-menu-item slot="menu">Option B</wc-menu-item>
  </wc-split-button>

Colors

Split buttons come in different colors to indicate the action or the type of button.

Primary Option

Success Option

Danger Option

Surface Option


  <wc-split-button color="primary">
    Primary
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button color="success">
    Success
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button color="danger">
    Danger
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button color="surface">
    Surface
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

Sizes

Fancy larger or smaller split buttons? Add the size attribute for additional sizes.

Extra small Option

Small Option

Medium Option

Large Option

Extra large Option


  <wc-split-button size="xs">
    Extra small
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button size="sm">
    Small
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button size="md">
    Medium
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button size="lg">
    Large
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button size="xl">
    Extra large
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

States

Disabled

Make split buttons look inactive by adding the disabled boolean attribute. Both the primary action and the dropdown trigger become non-interactive.

Filled Option

Tonal Option

Outlined Option


  <wc-split-button disabled="true">
    Filled
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button variant="tonal" disabled="true">
    Tonal
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

  <wc-split-button variant="outlined" disabled="true">
    Outlined
    <wc-menu-item slot="menu">Option</wc-menu-item>
  </wc-split-button>

Events

Save Save as draft

Save and publish


  <wc-split-button id="split-button-events">
    Save
    <wc-menu-item slot="menu" value="draft">Save as draft</wc-menu-item>
    <wc-menu-item slot="menu" value="publish">Save and publish</wc-menu-item>
  </wc-split-button>

  <script>
    const splitButton = document.querySelector('#split-button-events');
    if (splitButton) {
      splitButton.addEventListener('click', () => {
        myConsole.log('Primary action clicked', '<wc-split-button>');
      });

      splitButton.addEventListener('toggle-menu', event => {
        myConsole.log(
          `Menu state: ${event.detail.open ? 'open' : 'closed'}`,
          'toggle-menu',
        );
      });
    }
  </script>

On this page

Usage
Variants
Colors
Sizes
States
Events

Split Button

Usage

Variants

Colors

Sizes

States

Disabled

Events

Properties

Events

Methods

CSS Custom Properties