SplitButton

A main action with a menu of related actions.

import { SplitButton } from 'components/UI/SplitButton'

import { Menu } from 'components/UI/Menu'

Save with related actions

Use this when the main action has a few close alternatives, such as Export CSV with other formats. Here the main button saves, and the menu offers other save actions.

Unsaved insight

Every variant and size

Each row shows sm, md, and lg from left to right. The row labels give the default use of each look. Each raised segment lifts on its own.

primary · main path

raised · default

danger · final delete

outline · beside raised

flat · toolbars

States

Set disabled on the root to block both parts. Set loading or disabled on the button to keep the menu usable.

Disabled

Main action disabled

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

When no action is the usual choice, use a Menu. For the appearance, variant, and size rules, see Button.
Set appearance, variant, and size on Root.
When a page has several split buttons, give each trigger a specific aria-label.

API

SplitButton composes ButtonGroup, Button, and Menu. Root accepts Base UI Menu root props. Button accepts library Button props. Trigger accepts Menu trigger props except render and children. Popup accepts Menu popup props.

SplitButton.Root

Prop	Type	Default	Description
appearance	'flat' \| 'raised' \| 'outline'	'raised'	The shape: flat, raised 3D, or outlined. Sets it for every button in the group.
variant	'primary' \| 'secondary' \| 'danger'	'secondary'	The meaning and color: brand orange, neutral, or destructive red. Sets it for every button in the group.
size	'sm' \| 'md' \| 'lg'	'md'	Sets the size of both segments.
disabled	boolean	false	Disables the main action and the menu trigger.
className	string	–	Classes for the joined ButtonGroup.

SplitButton.Button

Prop	Type	Default	Description
loading	boolean	false	Shows a spinner and blocks the main action.

SplitButton.Trigger

Prop	Type	Default	Description
aria-label	string	'More actions'	The accessible name of the menu trigger.

SplitButton.Popup

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'end'	Aligns the menu with its trigger.