Split Button

The default split button pairs a primary action on the left with a chevron-down dropdown trigger on the right. Clicking the primary area fires OnClick, while the dropdown opens a menu of alternative actions using DropdownContent.

Use the Variant parameter to change the visual style. The variant applies to both the primary button and the dropdown trigger. Choose from Default, Secondary, Destructive, Outline, and Ghost.

Control the button dimensions with the Size parameter. Available sizes are Small, Default, and Large. The dropdown trigger automatically adjusts to match the selected size.

Add an icon to the primary button using the Icon render fragment. Control icon placement with IconPosition — Start (default) places the icon before the text, and End places it after.

Set Disabled to prevent interaction with both the primary button and the dropdown trigger. Both elements receive reduced opacity and do not respond to clicks.

Use SplitButtonSeparator to visually divide menu items into groups. Individual SplitButtonItem elements can be disabled by setting Disabled, preventing selection of specific options while keeping the rest of the menu interactive.

Use the Class parameter to apply custom Tailwind classes for project-specific styles such as gradients, custom colours, rounded corners, or shadows. The class applies to the outer container wrapping both the primary button and the dropdown trigger.

A pattern inspired by GitHub's pull request merge button. The selected merge strategy becomes the primary action, while the dropdown lets users switch between strategies. Each item shows a title and description, with a checkmark indicating the current selection.

A common real-world pattern: a split button for saving content with multiple save options. The primary action saves immediately, while the dropdown reveals alternatives like saving as a draft, template, or triggering an export. This reduces toolbar clutter by grouping related actions under a single button.