Skip to content
github

Split Button

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)

The SplitButton component supports specific combinations of variant and theme props:

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

Installation

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