Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProOne main action plus a menu of related ones, as two buttons in a group: the main part acts at once, the arrow only opens the menu.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when one action is by far the most common and a few variants of it exist: Merge and Squash and merge, Save and Save as, Send and Schedule send.
Do not use it for unrelated actions (use a menu button) or when all options are equally likely (use a segmented choice before the button).
It builds on button, dropdown-menu and data-menu, which the CLI installs for you.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Label of the main action. |
onClick | () => void | - | Main action. |
entries | MenuEntry[] | - | Menu content (see Data Menu). |
menuLabel | string | More options | Accessible name of the arrow. |
variant, size | Button variants | default | Passed to both buttons. |
disabled | boolean | false | Disables both halves. |
role="group"; the arrow has its own accessible name and aria-haspopup="menu".data-menu model, so checkable items and submenus work too.| Key | Action |
|---|---|
| Tab | moves from the main button to the arrow |
| Enter / Space / ArrowDown on the arrow | opens the menu |
| Escape | closes and keeps focus on the arrow |
The component ships a Testing Library test (split-button.test.tsx) that covers the main action not opening the menu, choosing an alternative and keyboard open and close.