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
- Avatar (not built)
- Badge (not built)
- Button
- Button Group (not built)
- Card (not built)
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider (not built)
- Dropdown
- Empty State
- Global Notification
- Hero Card
- Icon
- Icon Button
- Illustration (not built)
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner (not built)
- Modal
- Pagination (not built)
- Popover
- Radio
- Radio Group
- Select
- Split Button
- Table
- 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: