SplitButton

MD3 Expressive split button: a leading action button joined to a trailing button that opens a Menu of related actions. Opening the menu rounds the trailing button's inner corner and flips its chevron.

Variants

Both halves are styled by Button, so the variants and colors match it.

<SplitButton
  variant="filled"
  onClick={send}
  trailingAriaLabel="More send options"
  menu={
    <>
      <MenuItem onClick={schedule}>Schedule send</MenuItem>
      <MenuItem onClick={saveDraft}>Save as draft</MenuItem>
    </>
  }
>
  Send
</SplitButton>

Sizes

Icons

startIcon adds a leading icon. An icon-only leading button (startIcon without children) needs an aria-label, which is forwarded to the leading button.

<SplitButton startIcon={<SendIcon />} aria-label="Send" menu={menu} />

Controlled menu

The menu is uncontrolled by default (defaultOpen); pass open + onOpenChange(open) to control it. menuAlign aligns it to the trailing button ('end' by default).

const [open, setOpen] = useState(false)

<SplitButton open={open} onOpenChange={setOpen} menu={menu}>
  Send
</SplitButton>

Disabled

disabled disables both halves.

Accessibility

• Two native <button>s, each its own Tab stop. The ref, onClick and extra props land on the leading (action) button.
• The trailing button follows the APG menu-button pattern: it exposes aria-haspopup / aria-expanded; Enter / Space / ↓ open the menu on the first item (↑: the last), arrow keys cycle the items, Escape closes it and returns focus.
• The trailing button's name defaults to "More options"; prefer a trailingAriaLabel tied to the leading action, such as "More send options".

Props

Prop	Type	Default	Description
children	ReactNode	—	Leading action button label.
defaultOpen	boolean	false	Uncontrolled initial open state.
menu *	ReactNode	—	`MenuItem`s shown when the trailing button opens the menu.
menuAlign	enum	end	Menu alignment to the trailing button.
onOpenChange	((open: boolean) => void)	—	Notified when the menu open state changes.
open	boolean	—	Controlled menu open state.
size	enum	sm	Container size on the Expressive scale.
startIcon	ReactNode	—	Leading icon (decorative).
trailingAriaLabel	string	More options	Accessible label for the trailing menu button. Prefer a label tied to the leading action (e.g. "More send options").
variant	enum	filled	Visual emphasis (shared by both buttons).