SplitButton
A button with a default action and a dropdown menu, where the dropdown options are secondary actions, or are variants of the default action.
Import
import { SplitButton } from '@outfitio/outkit';
Usage
The SplitButton component composes Button, Menu and IconButton.
For basic usage of the split button, pass an array to the menuList prop. Each item in the array should be an object
with the following shape:
| Name | Type | Description |
|---|---|---|
| label | string | The text to be displayed |
| icon | string | The name of the Outkit icon |
| itemProps | any | any other keys (eg: onClick, as, href etc) will be forwarded as props to the MenuItem component |
Custom MenuList
Becuase SplitButton uses a Menu component under the hood, instead of passing in an array to the menuItems prop,
you can create your own custom menu by passing in your own MenuList component.
You can also pass a function to the menuList prop and you will get back the internal state of the Menu component as
arguments isOpen, onClose which could be useful for manually closing the menu if closeOnBlur is false.
Accessibility
- Buttons use browser defaults for keyboard interaction. Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards). Activate buttons with the enter / return or space key
Best Practice
Split buttons should:
- Have clear and predictable text labels
- Follow the {verb}+{noun} content formula to provide clarity to users, except in the case of common actions like "Close", "Cancel" or "OK",
- Use sentence case, where the first word is capitalised and the rest are lowercase, unless the term is a proper noun
- Only group related actions
Props
Any extra props (eg: css) will be spread onto the wrapping Box element.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
autoSelect | bool | No | false | Autoselect the first item in the menu |
buttonProps | object | No | Any extra props to spread onto the main button | |
children | node | Yes | Children of the main button | |
closeOnBlur | bool | No | true | Should the menu close when focus is lost |
closeOnSelect | bool | No | true | Should the menu close when a MenuItem is selected |
tooltip | string | No | 'More actions' | Tooltip for the show more IconButton |
iconButtonProps | object | No | Any extra props to spread onto the icon button | |
isDisabled | bool | No | ||
isLoading | bool | No | ||
loadingText | string | No | ||
menuList | node | any[] | func | Yes | ||
onClick | func | No | ||
onMenuClick | func | No | An optional callback that fires when the IconButton is clicked | |
rounded | 'sm' | 'md' | 'lg' | No | ||
size | 'sm' | 'md' | 'lg' | No | ||
variant | 'outline' | 'solid' | No | 'solid' | |
variantColor | string | No | 'gray' |