opinion
SplitButton
A main action with a caret that opens related actions, joined as one button.
Send reportClick the label to send, the caret for the alternatives
In context
Weekly reportOne primary send, two variations
Week of 19 Oct33 tasks done, 7 due soon
Harbour launch moves to 24 Oct. Rota export shipped. Crew interviews are one task behind.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
label | string | Yes | — |
onClick | (() => void) | undefined | No | — |
items | SplitButtonItem[] | Yes | — |
variant | "primary" | "secondary" | "tertiary" | "destructive" | undefined | No | primary |
size | "sm" | "md" | "lg" | undefined | No | md |
data-rebar-* attributes
data-rebar-component="split-button" on the root; data-rebar-part="primary" on the main button, "trigger" on the caret button, "menu" on the popover content, "item" per secondary action.
Migrating to Ant Design
AntD's Dropdown.Button is a very close direct equivalent: label maps to its children, items maps to menu.items, onClick maps directly to AntD's own onClick on the primary button half.