SplitButton

A directly-clickable primary action paired with an attached chevron toggle that opens a menu of related actions.

Examples

Data Driven

<SplitButton
  label="Save"
  variant="primary"
  size="md"
  items={[ {icon: Copy, label: 'Save a copy'}, {icon: Edit, label: 'Save as draft'}, {type: 'divider'}, {icon: Archive, label: 'Save and archive'}, ]}
/>

Compound

<SplitButton {...args}>
  <DropdownMenuItem icon={Copy} label="Save a copy" />
  <DropdownMenuItem icon={Edit} label="Save as draft" />
  <DropdownMenuItem icon={Archive} label="Save and archive" />
</SplitButton>

Variants

<div style={{display: 'flex', alignItems: 'center', gap: 16}}>
  <SplitButton
    items={[{icon: Edit, label: 'Edit'}]}
    label="Secondary"
    variant="secondary"
  />
  <SplitButton
    items={[{icon: Edit, label: 'Edit'}]}
    label="Primary"
    variant="primary"
  />
  <SplitButton
    items={[{icon: Trash2, label: 'Delete all'}]}
    label="Delete"
    variant="destructive"
  />
</div>

Sizes

<div style={{display: 'flex', alignItems: 'center', gap: 16}}>
  <SplitButton
    items={[{icon: Edit, label: 'Edit'}]}
    label="Small"
    size="sm"
  />
  <SplitButton
    items={[{icon: Edit, label: 'Edit'}]}
    label="Medium"
    size="md"
  />
  <SplitButton
    items={[{icon: Edit, label: 'Edit'}]}
    label="Large"
    size="lg"
  />
</div>

Disabled

<SplitButton
  label="Save"
  variant="primary"
  size="md"
  items={[ {icon: Copy, label: 'Save a copy'}, {icon: Edit, label: 'Save as draft'}, {type: 'divider'}, {icon: Archive, label: 'Save and archive'}, ]}
  isDisabled
/>

With Icon Primary

<SplitButton
  label="Save"
  variant="primary"
  size="md"
  items={[ {icon: Copy, label: 'Save a copy'}, {icon: Edit, label: 'Save as draft'}, {type: 'divider'}, {icon: Archive, label: 'Save and archive'}, ]}
  icon={Save}
/>

Loading Primary

<SplitButton
  label="Save"
  variant="primary"
  size="md"
  items={[ {icon: Copy, label: 'Save a copy'}, {icon: Edit, label: 'Save as draft'}, {type: 'divider'}, {icon: Archive, label: 'Save and archive'}, ]}
  isLoading
/>

API

SplitButton

A directly-clickable primary action paired with an attached chevron toggle that opens a menu of related actions.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Compound menu content (`<DropdownMenuItem>`), an alternative to `items`.
`className`	`string`	—	Additional CSS class names applied to the root element.
`data-testid`	`string`	—	Test ID applied to the primary action button.
`hasAutoFocus`	`boolean`	`true`	Whether to auto-focus the first menu item on open.
`icon`	`IconComponent`	—	Icon rendered before the primary action's label.
`isDisabled`	`boolean`	—	Whether both the primary action and the menu toggle are disabled.
`isMenuOpen`	`boolean`	—	Controlled open state of the menu.
`items`	`ReadonlyArray<DropdownMenuOption>`	—	Data-driven menu items (alternative to `children`).
`label`*	`string`	—	Visible text for the primary action. Also used as the group's accessible label.
`menuLabel`	`string`	`'More actions'`	Accessible label for the chevron toggle that opens the menu.
`menuWidth`	`number \| string`	—	Width of the menu surface.
`onOpenChange`	`(isOpen: boolean) => void`	—	Called when the menu open state changes.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the primary action button.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Default size for both buttons.
`style`	`CSSProperties`	—	Inline styles applied to the root element.
`variant`	`ButtonProps['variant']`	`'secondary'`	Visual style variant shared by both buttons.
`form`	`string`	—	HTML `form` attribute associating the button with a `<form>` by ID.
`id`	`string`	—	HTML `id` attribute applied to the root element.
`aria-controls`	`string`	—	Identifies the element(s) whose contents are controlled by the button.
`aria-describedby`	`string`	—	Identifies the element(s) that describe the button.
`aria-details`	`string`	—	Identifies the element that provides a detailed description.
`aria-expanded`	`boolean`	—	Indicates whether a controlled element is expanded or collapsed.
`aria-haspopup`	`boolean \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'`	—	Indicates the button opens an interactive popup element.
`aria-keyshortcuts`	`string`	—	Keyboard shortcuts that activate or focus the button.
`aria-labelledby`	`string`	—	Identifies the element(s) that label the button.
`onFocus`	`FocusEventHandler<HTMLElement>`	—	Focus event handler for the root element.
`onKeyDown`	`(event: KeyboardEvent<HTMLElement>) => void`	—	Keyboard event handler for the root element.
`onClick`	`MouseEventHandler<HTMLElement>`	—	Click event handler.
`endContent`	`ReactNode`	—	Content rendered after the label, such as a badge or count. Hidden in icon-only mode.
`isLoading`	`boolean`	—	Whether the button is in a loading state. Shows a spinner overlay, disables interaction, and announces "Loading" to assistive technologies.
`startContent`	`ReactNode`	—	Arbitrary content rendered before the label (after the icon, if present). Hidden in icon-only mode.