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	—	boolean Toggles the loading state.
isDisabled	—	boolean Toggles the disabled state.
isJustified	—	boolean Take up an entire available container width.
children	—	ReactNode Button 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>) => void Callback for when the primary action is clicked.
menuAriaLabel	"More actions"	string Label of the caret menu trigger for screen readers.
menu	—	ReactNode Alternate actions shown when the caret is clicked. Pass the `MenuItem`s (and optional `MenuDivider`s) directly; they're wrapped in a `MenuList`.
menuPlacement	"end"	MenuProps["placement"] Placement of the menu.