Split Button

A main action with a menu of alternatives.

Examples

Pass the menu's trigger attrs to trigger-attrs.

API

Prop	Type	Default
`menuLabel*` Accessible name for the toggle half, e.g. "More save options".	`string`	—
`triggerAttrs` The `attrs` from a `<Menu>` or `<Popover>` trigger slot, bound to the toggle half.	`Record<string, unknown>`	—
`variant` Style hook, exposed as `data-button-variant` on both halves.	`"danger" \| "ghost" \| "primary" \| "secondary" \| "solid"`	`"secondary"`
`size` Size hook, exposed as `data-button-size` on both halves.	`"medium" \| "small"`	`"medium"`
`disabled` Disables both halves.	`boolean`	`false`

Event	Payload
`action` The main half was pressed.	`[]`
`toggle` The toggle half was pressed.	`[]`

Slot	Props
`default` Main action label.	—
`caret` Replaces the toggle's chevron.	`{ open: boolean; }`

Styling

Parts: split-buttonbutton-label
States: data-split-variantdata-split-partdata-split-open

Accessibility

Name the toggle with menu-label.