Top
SplitButton API - API
SplitButton API
Props (11)
Callback Props (4)
Styling Props (2)
Objects
default: undefined
Props passed to Button component.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const overStyle = {
  background: '#07a'
}

export default () => <SplitButton items={items} buttonProps={{ overStyle }}>
  Files
</SplitButton>
Bool
default: undefined
Whether the split button is initially expanded.
For controlled behaviour, see expanded.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitButton/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'
const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];
class App extends React.Component {
  render() {
    return <div>
      <SplitButton
        items={items}
        defaultExpanded={true}
      >
        Files
      </SplitButton>
    </div>
  }
}
export default () => <App />
Bool
default: undefined
Whether the component is disabled.
To disable only one of the subcomponents use buttonProps or dropdownButtonWrapperProps.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitButton/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      disabled: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.disabled}
          onChange={(disabled) => this.setState({ disabled })}
        >
          Disable
        </CheckBox>
      </div>
      <SplitButton
        items={items}
        disabled={this.state.disabled}
      >
        Files
      </SplitButton>
    </div>
  }
}

export default () => <App />
Objects
default: undefined
Props passed to Button component inside DropdownButton.
For props passed directly to the DropdownButton see dropdownButtonWrapperProps.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const style = {
  background: '#07a'
}

export default () => <SplitButton items={items} dropdownButtonProps={{ style }}>
  Files
</SplitButton>
Objects
default: undefined
Props passed to DropdownButton.
For props passed directly to the Button inside DropdownButton see dropdownButtonProps.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const style = {
  border: '2px solid red',
  borderRadius: 4
}

export default () => <SplitButton
  items={items}
  dropdownButtonWrapperProps={{ style }}
>
  Files
</SplitButton>
Bool
default: undefined
Whether the split button is expanded. To react to expand change see onExpandedChange.
For uncontrolled behaviour, see defaultExpanded.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitButton/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { expanded: true }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.expanded}
          onChange={(expanded) => this.setState({ expanded })}
        >
          Expanded
        </CheckBox>
      </div>
      <SplitButton
        items={items}
        expanded={this.state.expanded}
      >
        Files
      </SplitButton>
    </div>
  }
}

export default () => <App />
Array
default: undefined
Describes items rendered inside menu.
For more details see items on menu api.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <SplitButton items={items}>
  Files
</SplitButton>
React.Component
default: "Menu"
Specify a custom menu component to be rendered instead of Menu.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Menu from '@zippytech/react-toolkit/Menu'
import '@zippytech/react-toolkit/Menu/index.css'
import Icon from './icons'

const MenuComp = (props) => <Menu {...props} itemOverStyle={{ color: 'magenta' }} />

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <SplitButton menu={MenuComp} items={items}>Files</SplitButton>
Objects
default: undefined
Props passed to Menu component.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

const itemOverStyle = {
  color: 'magenta'
}

export default () => <SplitButton items={items} menuProps={{ itemOverStyle }}>
  Files
</SplitButton>
Fn(menuProps): React.Node
default: undefined
Custom render for Menu component.
Return new React.Node or return undefined, and mutate menuProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'

const renderMenu = (menuProps) => {
  menuProps.itemOverStyle = { color: 'magenta' }
}

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <SplitButton renderMenu={renderMenu} items={items}>
  Files
</SplitButton>
Bool
default: false
Whether to use direction: rtl.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitButton/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      rtl: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.rtl}
          onChange={(rtl) => this.setState({ rtl })}
        >
          right-to-left
        </CheckBox>
      </div>
        <SplitButton
          rtl={this.state.rtl}
          items={items}
        >
          Files
        </SplitButton>
    </div>
  }
}

export default () => <App />
For more callback props see buttonProps or dropdownButtonWrapperProps.
Fn(event)
default: undefined
Called when button is clicked.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <div>
  <SplitButton
    items={items}
    onClick={() => zippy.notification.first.addNotification({
      content: 'onClick called',
      style: { marginTop: 56 }
    })}
  >
    Files
  </SplitButton>
  <NotificationBoard id="first" />
</div>
Fn(event)
default: undefined
Called when dropdown button is clicked.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <div>
  <SplitButton
    items={items}
    onDropdownButtonClick={() => zippy.notification.first.addNotification({
      content: 'onDropdownButtonClick called',
      style: { marginTop: 56 }
    })}
  >
    Files
  </SplitButton>
  <NotificationBoard id="first" />
</div>
Fn(expanded)
default: undefined
Called when expanded changes.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <div>
      <SplitButton
        items={items}
        onExpandedChange={() => zippy.notification.first.addNotification({
          content: 'onExpandedChange called',
          style: { marginTop: 56 }
        })}
      >
        Files
      </SplitButton>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />
Fn(event, itemProps)
default: undefined
Called when a menu item, at any nesting level has been clicked.
For more fine controll over menu see menuProps, renderMenu or menu.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];
export default () => <div>
  <SplitButton
    items={items}
    onMenuClick={() => zippy.notification.first.addNotification({
      content: 'onMenuClick called',
      style: { marginTop: 56 }
    })}
  >
    Files
  </SplitButton>
  <NotificationBoard id="first" />
</div>
There is only a style prop that is added on wrapper div. To style Button or Menu components, use menuProps and buttonProps.
String
default: undefined
A className to be applied to the split button. The passed value is appended to other classes that the component adds by default.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'
import './index.global.css'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <SplitButton
  items={items}
  className="splitbutton-border-green"
>
  Files
</SplitButton>
object
default: undefined
Inline style added wrapper around button and dropdown button.
import React from 'react'
import SplitButton from '@zippytech/react-toolkit/SplitButton'
import '@zippytech/react-toolkit/SplitButton/index.css'
import Icon from './icons'

const items = [
  { label: 'Refresh', icon: <Icon type="refresh" /> },
  { label: 'Back', disabled: true, icon: <Icon type="back" /> },
  '-',
  { label: 'Save file as', icon: <Icon type="save" />,
    items: [ { label: 'PDF' }, { label: 'HTML' }, { label: 'PNG' }, { label: 'Animated GIF' } ] },
  { label: 'Open' },
  { label: 'Export sheet to', items: [ { label: 'CSV' }, { label: 'Proprietary format' } ] }
];

export default () => <SplitButton
  items={items}
  style={{ border: '2px solid #1976D2' }}
>
  Files
</SplitButton>