Prepared Docs

SplitButton renders a Button for the main label (children) and a Menu triggered by a chevron Interactable. Pass sibling menu content with the menuContent prop using SplitButtonItem, SplitButtonSeparator, SplitButtonLabel, and grouped variants (SplitButtonCheckbox, SplitButtonRadio, SplitButtonSwitch) as needed. Optional menuOpen / onMenuOpenChange control the menu; menuSide and menuAlign position the popover.

Props

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name(s) applied to the element.
`disabled`	`boolean`	`false`	When true, disables interaction and applies a disabled visual state.
`iconTitle`	`string`	—	Accessible title for `leadIcon` and `tailIcon`.
`leadIcon`	`SVGAsset`	—	SVG icon displayed before the button label. Overridden by `state` when set.
`menuAlign`	`MenuAlignment`	`MenuAlignment.End`	Alignment of the dropdown menu relative to the split button.
`menuContent`	`ReactNode`	—	—
`menuOpen`	`boolean`	—	Controlled open state of the dropdown menu.
`menuSide`	`MenuSide`	`MenuSide.Bottom`	Side of the trigger where the dropdown menu opens.
`onMenuOpenChange`	`((open: boolean) => void)`	—	Callback fired when the dropdown menu open state changes.
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the primary action button element.
`size`	`ButtonSize`	`ButtonSize.Large`	Button size variant. Takes precedence over `small` when both are set.
`state`	`ButtonState`	—	Button state (Loading/Success/Error). When set, overrides the leadIcon.
`type`	`ButtonType`	`ButtonType.Secondary`	Enum for button appearance variants, don't use the string value. always use the enum

Storybook

Interactive examples and edge cases for this component are in Storybook.

Primary

Secondary

With lead icon

Sizes

Disabled

All variants

Split button / Usage

Split button / Accessibility

Props

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name(s) applied to the element.
`disabled`	`boolean`	`false`	When true, disables interaction and applies a disabled visual state.
`iconTitle`	`string`	—	Accessible title for `leadIcon` and `tailIcon`.
`leadIcon`	`SVGAsset`	—	SVG icon displayed before the button label. Overridden by `state` when set.
`menuAlign`	`MenuAlignment`	`MenuAlignment.End`	Alignment of the dropdown menu relative to the split button.
`menuContent`	`ReactNode`	—	—
`menuOpen`	`boolean`	—	Controlled open state of the dropdown menu.
`menuSide`	`MenuSide`	`MenuSide.Bottom`	Side of the trigger where the dropdown menu opens.
`onMenuOpenChange`	`((open: boolean) => void)`	—	Callback fired when the dropdown menu open state changes.
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the primary action button element.
`size`	`ButtonSize`	`ButtonSize.Large`	Button size variant. Takes precedence over `small` when both are set.
`state`	`ButtonState`	—	Button state (Loading/Success/Error). When set, overrides the leadIcon.
`type`	`ButtonType`	`ButtonType.Secondary`	Enum for button appearance variants, don't use the string value. always use the enum