Split Button
A button that runs the most common action, joined to a menu of related alternatives.
Primary
SplitButton.Root is a Dropdown.Root. Put the leading SplitButton.Action, the chevron SplitButton.Trigger and an ordinary Dropdown.Content inside it. The trigger shows only an icon, so give it an aria-label.
Secondary with options
Without mode, both halves use the secondary button style. The menu can change what the action does. Here it picks which checks run, and keeps itself open while you toggle them.
Ghost
Use mode="ghost" inside toolbars. Hovering either half also tints the other, so the pair reads as one control. Remove the root's shadow with shadow-none when it sits on a flat surface.
Sizes
size on the root applies to both halves.
Disabled and loading
disabled on the root disables both halves. Each half also takes its own disabled, and the action takes the button's loading prop. Disable the trigger while the action is loading so the menu cannot start a second run.
Link action
Give SplitButton.Action an href to render it as a link.
SplitButton.Root Properties
Button style shared by both halves.
Default: secondary
Button size shared by both halves.
Default: regular
Disables both halves.
Default: false
Whether the menu is open, when controlled.
Whether the menu starts open, when uncontrolled.
Called when the menu opens or closes.
Whether the open menu blocks interaction with the rest of the page. Always true inside a dialog or drawer.
Default: false
Additional classes for the wrapper around both halves.
SplitButton.Action Properties
Label of the action.
Renders the action as a link to this destination.
Icon before the label.
Shows a spinner in place of the icon and disables the action.
Disables the action. Defaults to the root's disabled.
Overrides the root's mode for this half.
Overrides the root's size for this half.
Additional classes for the action. Other Button props are passed through.
SplitButton.Trigger Properties
Accessible name of the icon-only menu trigger, such as More ways to create.
Icon of the trigger.
Default: chevron-down
Disables the trigger. Defaults to the root's disabled.
Overrides the root's mode for this half.
Overrides the root's size for this half.
Additional classes for the trigger. Other Button props are passed through.