Skip to main content

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

NameTypeRequiredDefaultDescription
initialIndexnumberNo0Determines default selected otpion by index.
variantstringNocontainedVariant of the button. 'outlined' 'text' 'contained'
heightnumberNoundefinedHeight of the button in px.
optionsArrayYes[]List of options.

options

NameTypeRequiredDefaultDescription
labelbooleanNo''Displayed label.
iconReactNodeNo-Left Icon.
disabledbooleanNofalseDisabled item.
onClickfunctionNo()=>Action on click on item.