Split button

Split buttons (COMPONENT_SPEC §4; Compose SplitButtonLayout with SplitButtonDefaults.LeadingButton and the checkable TrailingButton): a leading button for the primary action and a trailing button that opens a menu of related actions, 2dp apart. While the menu is open the trailing button is checked: its inner corners morph to full and its icon turns 180°. The grids are plain HTML with m3e-css classes; aria-expanded="true" shows the open state. The <m3e-split-button> element and <SplitButton> (React) wire the menu and spring the corners and the icon.

Variants and states (static, CSS only)

Sizes

XS to XL: SplitButton*Tokens heights, paddings, inner corners and trailing icon sizes; the leading icon, spacing and label follow the button of the same size.

Custom element

<m3e-split-button label icon menu-label variant size> with an <m3e-menu> child: the trailing button becomes the menu's anchor (press, ArrowDown / ArrowUp / Enter / Space open it, Escape closes it and returns focus to the trailing button). Events: press for the leading button, action from the menu items.

Send a copyShare linkDiscardCutPasteMail

Last event: none

إرسال نسخة

React

<SplitButton variant size icon onPress menu={<Menu>…</Menu>} menuLabel>. The menu's open state can be controlled with isOpen / onOpenChange.