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: The SplitButton supports specific combinations of variant and theme props:

• variant="primary" with theme="default"
• variant="outline" with theme="default" | "success" | "danger"

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
<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>

Props

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