Split button

A split button pairs a primary action with a caret that opens a menu of alternate actions. Use it when there's one clearly preferred action, but the user occasionally needs a related one.

#Example

#Usage

#Menu

Compose the menu with the same MenuItem and MenuDivider components used by Menu. Pass them through the menu prop, wrapping multiple items in a fragment.

#Variant

Both segments share the same variant so the button reads as a single control.

#Icon

Use icon to add a leading icon to the primary action.

#Loading

The isLoading prop shows a spinner on the primary action and disables the caret while the action is in flight.

#Disabled

The isDisabled prop disables both segments.

#Combinations

#Guidelines

#When to use it

• When there's a single default action plus a small number of closely related alternates (for example, "Activate" with "Submit for approval").
• When showing every action as a separate button would clutter the surface.

#When not to use it

• If the actions are equally weighted, use a Button Group instead.
• If there's no clearly preferred action, use a Menu.

#Content

• Use sentence case for the primary label and menu items.
• Make the primary action the one most users want most of the time.

#Props

#SplitButton

Name	Default	Description
isLoading	—	booleanToggles the loading state.
isDisabled	—	booleanToggles the disabled state.
isJustified	—	booleanTake up an entire available container width.
children	—	ReactNodeButton text.
size	—	"sm" | "md" | "lg" | "xl"Determines the height of the button.
icon	—	ComponentType<SVGAttributes<SVGElement>>Primary icon that's displayed on the left. Only icon or imageUrl can be set at the same time.
variant	"primary"	Exclude<NonNullable<ButtonProps["variant"]>, "link">Button variant, which determines the appearance of both segments. The link variant is unsupported: it has no fill or border for the segments to share.
onClick	—	(event: MouseEvent<HTMLButtonElement>) => voidCallback for when the primary action is clicked.
menuAriaLabel	"More actions"	stringLabel of the caret menu trigger for screen readers.
menu	—	ReactNodeAlternate actions shown when the caret is clicked. Pass the MenuItems (and optional MenuDividers) directly; they're wrapped in a MenuList.
menuPlacement	"end"	MenuProps["placement"]Placement of the menu.