SplitButton

import { SplitButton } from '@yarcl/react';

The main button executes the selected action. The arrow opens a menu of choices. Choosing an option updates the button’s label and icon without executing anything.

Save draft

Nothing executed yet

<SplitButton
  aria-label="Save actions"
  defaultValue="draft"
  options={[
    { value: 'draft', label: 'Save draft' },
    { value: 'publish', label: 'Publish' },
    { value: 'schedule', label: 'Schedule', disabled: true },
  ]}
  onAction={(value) => handleSave(value)}
/>

Use value and onValueChange to control the selection. Without defaultValue, the first enabled option is selected initially. Values must be unique. Empty lists and lists with no enabled options disable both buttons. If the selected option is removed or disabled, the main button is disabled until an enabled action is chosen.

size, color, radius and variant come from your config. Both button segments follow components.SplitButton, including allowedSizes and sizeOverrides; menu items follow components.Menu. Native attributes, className, style and ref go to the outer group. Both buttons use type="button"; use onAction to perform an action or submit a form explicitly.

Accessibility

• Give the group an aria-label describing its actions. dropdownLabel names the arrow button and the menu choices.
• Both segments are keyboard focusable. Enter or Space executes the main action or opens the menu; Arrow Down and Arrow Up also open the menu from its trigger.
• Arrow keys navigate choices, typing finds a label, and Enter or Space selects without executing. Escape closes the menu. Closing returns focus to the arrow button.
• The selected choice exposes role="menuitemradio" and aria-checked. Disabled options cannot be selected. Icons are decorative.
• disabled and loading disable both buttons and close the menu. Loading shows a spinner and marks the main action busy.

Props

Prop	Type	Default	Description
options required	readonly SplitButtonOption<V>[]		Actions to choose from. Values must be unique.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
defaultValue	NoInfer<V>	The first enabled option's value.	Initial selected action when uncontrolled.
disabled	boolean		Disables both buttons and closes the menu.
dropdownLabel	string	config.labels.chooseAction	Accessible name for the dropdown button and its choices.
loading	boolean		Shows a spinner on the main button, disables both buttons and closes the menu.
onAction	(value: V) => void		Called when the main button executes the selected action.
onValueChange	(value: V) => void		Called when an action is selected. Selection does not execute the action.
placeholder	string	config.labels.chooseAction	Main button label when the selected value has no matching option.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
value	NoInfer<V>		Controlled selected action.
variant	Variantconfig	config.defaults.variant	Style recipe, from the component's variant map or the shared variants config.

Options

Prop	Type	Default	Description
label required	string		Visible action label, also used for type-to-select.
value required	V		Value reported when this action is selected or executed.
disabled	boolean		Prevents selecting or executing this action.
icon	ReactNode		Decorative icon shown before the label.