Top
SplitButton - Getting started
SplitButton
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <SplitButton /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/SplitButton and @zippytech/react-toolkit/SplitButton/index.css.
A <SplitButton /> is different from a <DropdownButton /> in that the <SplitButton /> triggers the main button action when clicking the button content (and not the expander arrow). A <DropdownButton /> does not have a main button action, since it only expands the menu when the button is clicked.
This is the most basic setup for a <SplitButton />. In the following sections we'll explore how to use the SplitButton in various scenarios, supported props, theming, etc.
In order to be notified of button clicks, use onClick.
In order to be of clicks inside the button menu items, use onMenuClick({ item }).
See the Menu for documentation on how you can configure the <Menu /> used in the <SplitButton /> component.
You can customize the dropdown menu using several props. For example, dropdownButtonProps will customize the dropdown button, as seen in the example below.
You can also render a custom menu, using the renderMenu prop.