Split Button
Split buttons let you immediately perform an action or choose additional options from a dropdown.
Also known as:
Button with dropdownDropdownSegmented button
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field
- Select
- Slider
- Slider
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need to know
- Avoid split buttons where separated buttons and icon buttons will do.
- Only include related actions in the dropdown.
- Don’t use links in the dropdown.
Visuals
UI Kit
To keep in mind
Sometimes there’s not enough space for a separate Button and Icon button, and they both control closely related actions.
- See Button guidelines.
- See dropdown guidelines.
- RTL: the segmented chevron appears on the left.
- Focus indicator
- See Interaction states guidelines for focus indicators.
- On keyboard navigation show a focus indicator around the default action, on the next tab show a focus indicator on the chevron action.
- For select options show focus indicator on keyboard navigation and on click (not hover)
When to use and when not to use
When to use
- Use when there’s not enough space for a separate Button and Icon button, and they both control closely related actions.
When not to use
- Don’t use a button when navigation is involved. Instead, use a link.
- Don’t use a split button separate Button and Icon Button will do.
- If there’s only 1 action for the dropdown, try to use another button.
See also
External links
Here are some examples of other existing design systems: