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