Also known as:
Button with dropdownDropdownSegmented button
Split Button
Split buttons let you immediately perform an action or choose additional options from a dropdown.
- Overview
- Autocomplete (not built)
- Avatar (not built)
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider
- Dropdown
- Empty State
- Filter Drawer
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- 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.
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: