ButtonWithOptions

The ButtonWithOptions component provides a flexible UI element for displaying a button with a dropdown of options. It can behave as a radio button group if a selectedValue is provided, or as a regular dropdown otherwise.

Usage

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

return (
  <ButtonWithOptions
    id="my-button"
    handleButtonClick={handleClick}
    options={[
      { value: 'option1', label: 'Option 1', description: 'Description for option 1' },
      { value: 'option2', label: 'Option 2', description: 'Description for option 2' },
    ]}
    handleOptionChange={handChangeOption}
    theme="primary"
  >
    Primary Button
  </ButtonWithOptions>
)

API Reference

Prop	Required	Default	Type
id	true		string
handleButtonClick	true
loading	false	false	boolean
selectedValue	false		string
options	true
handleOptionChange	true
className	false		string
buttonClassName	false		string
size	false	'default'	'default' | 'md'
theme	false	'primary'	'default' | 'primary' | 'error' | 'success' | 'disabled' | 'warning' | 'muted'
disabled	false	false	boolean
children	true		ReactNode
dropdownContentClassName	false		string