SplitButton

Examples

<SplitButton
  options={[
    {
      label: 'WithIcon',
      icon: <AddBoxMuiIcon />,
      onClick: () => console.log('onClick with icon')
    },
    {
      label: 'Disabled',
      disabled: true
    },
    {
      label: 'Label 3',
      icon: <OpenInNewMuiIcon />,
      onClick: () => console.log('Label 3')
    },
    { label: 'Label Label Label Label ' }
  ]}
/>

Example initialIndex

<SplitButton
  initialIndex={1}
  options={[
    {
      label: 'Label 1',
      onClick: () => console.log('Label1')
    },
    {
      label: 'initial Index selected',
      onClick: () => console.log('Click on inital index')
    },
    {
      label: 'Label3'
    }
  ]}
/>

Example variant contained

<SplitButton
  variant="contained"
  options={[
    {
      label: 'Label 1'
    },
    {
      label: 'Label 2'
    }
  ]}
/>

Example height

<SplitButton
  height={55}
  options={[
    {
      label: 'Label 55px'
    },
    {
      label: 'Label 2'
    }
  ]}
/>

SplitButton Props

Name	Type	Required	Default	Description
initialIndex	number	No	0	Determines default selected otpion by index.
variant	string	No	contained	Variant of the button. 'outlined' 'text' 'contained'
height	number	No	undefined	Height of the button in px.
options	Array	Yes	[]	List of options.

options

Name	Type	Required	Default	Description
label	boolean	No	''	Displayed label.
icon	ReactNode	No	-	Left Icon.
disabled	boolean	No	false	Disabled item.
onClick	function	No	()=>	Action on click on item.