SplitButton

The SplitButton component provides a flexible UI element combining a button with a dropdown menu of options. It can be used in two different modes:

• Regular dropdown menu (default behavior)
• Radio button selection group (when selectedValue is provided)

Note: Unlike the standard Button component, SplitButton does not support different sizes. It automatically inherits the default size from the underlying Button component.

Usage

import { SplitButton } from '@harnessio/ui/components'

// Basic usage with default solid+primary combination
const options = [
  { value: 'option1', label: 'Option 1', description: 'Description for option 1' },
  { value: 'option2', label: 'Option 2', description: 'Description for option 2' },
]

// Default combination (solid variant with primary theme)
<SplitButton
  id="my-button"
  handleButtonClick={() => console.log('Button clicked')}
  options={options}
  handleOptionChange={(value) => console.log('Selected:', value)}
>
  Default Button
</SplitButton>

// Surface variant with success theme
<SplitButton
  id="success-button"
  variant="surface"
  theme="success"
  handleButtonClick={() => console.log('Button clicked')}
  options={options}
  handleOptionChange={(value) => console.log('Selected:', value)}
>
  Success Button
</SplitButton>

// As a radio button group
<SplitButton
  id="radio-button"
  handleButtonClick={() => console.log('Button clicked')}
  selectedValue="option1"
  options={options}
  handleOptionChange={(value) => console.log('Selected:', value)}
>
  With Selected Value
</SplitButton>

Allowed Combinations

The SplitButton component has specific rules for variant and theme combinations.

Radio Button Selection

When providing a selectedValue, the dropdown behaves as a radio button group.

States

The component supports various states like loading and disabled.

API Reference

Prop	Required	Default	Type
id	true		string
handleButtonClick	true		(e: MouseEvent) => void
options	true		{ value: string; label: string; description?: string }[]
handleOptionChange	true		(val: string) => void
selectedValue	false		string
loading	false	false	boolean
disabled	false	false	boolean
variant	false	'solid'	'solid' | 'surface'
theme	false	'primary'	'primary' | 'success' | 'danger' | 'muted'
children	true		ReactNode
className	false		string
buttonClassName	false		string
dropdownContentClassName	false		string