IntelliJ Platform Plugin SDK Help

Split Button

A split button is a combination of a regular button and a drop-down button.

Split button

Anatomy

A split button consists of the main action on the left and a drop-down button that shows a dropdown with less common actions on the right:

Split button action anatomy

When to use

When there are more than two actions related to the main action, and there is not enough space for separate buttons, put these actions into the dropdown menu:

Related actions in a split button

The second action is dangerous and uncommon

Dangerous actions can destroy users’ data and cannot be easily undone. To avoid accidental clicks on a dangerous action, you can hide it in the dropdown menu if this action is uncommon, for example Force Push:

Dangerous action in a split button

An uncommon dangerous action can be the only action in the menu.

When not to use

Unrelated actions

If unrelated actions are hidden under the dropdown menu, they are hard to find:

Incorrect

Unrelated actions

Correct

Unrelated actions in separate buttons

Putting the single action in the dropdown menu doesn't save a lot of space:

Incorrect

One related action

Correct

Unrelated actions in separate buttons

How to use

Main action

Refer to the regular button rules.

Click

  • Show the dropdown menu with secondary actions.

  • Hide the menu when clicking outside the menu or on the second dropdown button click.

Hover

Show a tooltip:

Tooltip on hover

Place related actions into the dropdown menu. Do not duplicate the main action in the dropdown menu, otherwise it is confusing how to trigger the main action — with the button or from the menu.

Incorrect

Duplicated actions in dropdown menu

Correct

Unique actions in dropdown menu

Keyboard navigation & shortcuts

  • Trigger the main action when the default button shortcut is pressed if the split button is the default one.

  • Open the dropdown menu with the first menu item selected on Alt+Shift+Enter.

  • Do not show the dropdown menuwhen the button gains focus.

Focus on the button

Enter

Ctrl+Enter

Invoke the default button action.

Space

Invoke the main action.

Arrow Down

Show the dropdown menu with secondary actions and move focus to the first item in the menu.

Tab

Shift + Tab

Move focus to the control next to the split button and hide the dropdown menu.

Focus on the dropdown menu

Enter

Space

Invoke the selected action.

Arrow Down

Arrow Up

  • Navigate through the elements.

  • Pressing Arrow Down on the top element moves the focus to the bottom element.

  • Pressing Arrow Up on the bottom element moves the focus to the top element.

Esc

Close the dropdown menu and move the focus to the split button.

Last modified: 07 November 2024