Split button or two separate buttons?

Count how often each action runs. When one path accounts for most uses, give it the main half and tuck the rest behind the chevron. When two actions are genuinely equal, like Cancel and Save, show both as full buttons.

Should the menu half look different from the main half?

It should read as one control. Share the same variant, height, and corner radius, with a thin divider between the halves. Gmail's Send button is the reference: one filled shape, two click targets.

What goes in the menu?

Near misses on the default action. Schedule send, send a copy, export as PDF all belong with Send. Rename and Delete belong in a row menu, because they are not variations on sending.

How wide should the chevron half be?

Wide enough for a 44 by 44px target on touch screens (WCAG 2.5.8). On desktop, 32 to 36px beside the label is enough if the hit area still meets the minimum.

Does the main half need its own keyboard shortcut?

Give the default action the shortcut people already expect, like Enter to send from a compose screen. Put the rest in the menu with their own hints. The chevron opens on Alt+Down in many desktop apps.

Can the main half open the menu on a long press?

On touch, some products open the menu on a long press of the main half. That is a convenience, not a replacement for a visible chevron. People who do not discover the gesture still need the second target.

Split button

A split button pairs one default action with a menu of close alternatives. The main half runs immediately and never opens the list.

ActionsBuild difficulty: Medium<div role="group">

Also called Split action button, Button with menu.

Invoice #1042

Acme Corp · $4,280.00 · due in 14 days

Nothing sent yet. Pick the main action or open the menu.

Click Send invoice to run the default. Open the chevron for near misses. Each path updates the panel below.

For designers

A split button is how you keep the fast path fast. The label people tap eighty percent of the time stays on the surface, full size, one click. The other twenty percent lives behind a chevron that is obviously part of the same control, not a separate menu button floating nearby.

Stripe's dashboard uses the pattern on export: Export CSV is the default, and JSON or PDF sit in the menu. The main label never changes meaning between visits, which is what separates this from a generic action menu with a prominent first item.

The cost is teaching two targets in one shape. The main half must never open the list. If clicking Send sometimes opens a picker, you have built a menu with extra steps, and trust in the default label erodes quickly. Test with five people who have never seen the screen: they should describe the control as "Send, with more options", not "a menu".

Use a split button when

One action is chosen most of the time and the rest are variations on it, like Send versus Schedule send
Keeping the default visible saves a click on every use
The alternatives fit in a short menu, roughly under six items

Reach for something else when

Every action deserves equal weight and none is the clear default. Use two buttons instead.
The control only opens a list and nothing runs until someone picks an item. Use a menu instead.
The extras are unrelated to the main action and would read as a general action list. Use a menu instead.
The actions belong on the object you are editing, not on a page header. Use a toolbar instead.

Variants

Primary

Outline

Icon main

Primary for the action people pick most days. Outline when the split sits on a toolbar or a pale panel.

Primary. The filled style for the action that moves the task forward: Send, Save, Export. This is the version in the demo above.

Outline. For toolbars and pale panels where a filled button would dominate the whole row. The two halves still share one border.

Icon main. When space is tight and the icon is already learned, like Download. Keep a text label on the chevron half for screen readers even if the icon carries the meaning visually.

How to build a split button

Mark the pair as one group in the markup, with two buttons inside it. The first button runs the default action. The second opens a menu and carries aria-haspopup="menu". Label the chevron with what it reveals, not with "More".

<div role="group" aria-label="Send invoice">
  <button type="button">Send invoice</button>
  <button
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-label="More send options"
  >
    <span aria-hidden="true">▾</span>
  </button>
</div>
<ul role="menu" hidden>
  <li role="menuitem">Schedule send</li>
  <li role="menuitem">Send copy to me</li>
  <li role="menuitem">Save as PDF</li>
</ul>

Tab stops on each half separately, which is correct. The main half activates on Enter and Space. The menu half opens on Enter, Space, or Down arrow, then arrow keys move inside the list the way the WAI-ARIA Authoring Practices describe for menus.

Paint focus on both halves with a ring that meets WCAG 2.4.7. The divider between them is visual only; do not remove focus from the group when moving from label to chevron. The detail teams rebuild wrong is merging the halves into one button that toggles the menu: the default action must stay one click, always.

Edge cases

Loading. Disable both halves while the default action runs. Dimming only the label while the chevron stays active invites a second send.

Destructive defaults. Do not put Delete on the main half. If nothing safe is the default, you have a menu, not a split button.

Touch targets. The chevron half is easy to shave too narrow. Measure the hit area, not the icon.

Common questions

Split button or two separate buttons?: Count how often each action runs. When one path accounts for most uses, give it the main half and tuck the rest behind the chevron. When two actions are genuinely equal, like Cancel and Save, show both as full buttons.
Should the menu half look different from the main half?: It should read as one control. Share the same variant, height, and corner radius, with a thin divider between the halves. Gmail's Send button is the reference: one filled shape, two click targets.
What goes in the menu?: Near misses on the default action. Schedule send, send a copy, export as PDF all belong with Send. Rename and Delete belong in a row menu, because they are not variations on sending.
How wide should the chevron half be?: Wide enough for a 44 by 44px target on touch screens (WCAG 2.5.8). On desktop, 32 to 36px beside the label is enough if the hit area still meets the minimum.
Does the main half need its own keyboard shortcut?: Give the default action the shortcut people already expect, like Enter to send from a compose screen. Put the rest in the menu with their own hints. The chevron opens on Alt+Down in many desktop apps.
Can the main half open the menu on a long press?: On touch, some products open the menu on a long press of the main half. That is a convenience, not a replacement for a visible chevron. People who do not discover the gesture still need the second target.

Last reviewed 27 AUG 2026