SplitButton

beta

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)

Usage

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

// ...

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

// Primary variant with default theme
return (
  <>
    {/* Primary variant with default theme */}
    <SplitButton
      id="primary-default"
      handleButtonClick={() => console.log('Button clicked')}
      options={options}
      handleOptionChange={(value) => console.log('Selected:', value)}
    >
      Primary + Default
    </SplitButton>

    {/* Outline variant with success theme */}
    <SplitButton
      id="outline-success"
      variant="outline"
      theme="success"
      handleButtonClick={() => console.log('Button clicked')}
      options={options}
      handleOptionChange={(value) => console.log('Selected:', value)}
    >
      Outline + Success
    </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>
  </>
)

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
disableButton	false	false	boolean
disableDropdown	false	false	boolean
variant	false	'primary'	'primary' \| 'outline'
theme	false	'default'	'default' \| 'success' \| 'danger'
children	true		ReactNode
className	false		string
buttonClassName	false		string
dropdownContentClassName	false		string