Split button

A split button is a type of button that includes additional options (or actions) related to its primary function, which are placed under an overflow menu as icon buttons.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Principles

Use when

  1. needed to show actions related to the primary function or that can be performed subsequently.
  2. to indicate that secondary actions are contextually related to a function.

Don't use when

  1. there is a lack of context or when the function is not closely related to the primary function. Instead, use a button.
  2. navigating between pages or states. Instead, consider using a content switcher.

Structure

Split button's icon button collapse version (above) and expand version (below).

Split button's icon button collapse version (above) and expand version (below).

  1. Button (Primary CTA)
  2. Icon Button
  3. Overlflow menu

Properties

Types

Primary

It should be used to indicate the primary action or actions to be taken on a record on show pages.

Secondary

Secondary split button can be used when emphasizing a secondary action that is not the primary action or actions to be taken on a record. It can be used in conjunction with the primary type.

Outline

It should be used when listing actions related to a record, especially for the action that is least important. If a primary or secondary button is not used on the relevant page, it is not recommended to use.

Size

Default

It can be used on widgets in web interfaces.

Large

Large can be preferred for installation or setup stages.

Small

It can be used in windows such as modals when required.

Behavior

Positioning

Split button should be used in places where it is relevant to the type of data displayed, such as the show page of a record and its corresponding widgets.

Overflow menu placement

split-button-overflow-menu-placement

The overflow menu should be aligned to the right of the icon button (and the split button as a whole). This way, the actions listed in the overflow menu can appear contextually related to the primary action of the split button.

The items in the overflow menu should be ordered in terms of importance, from most relevant to least relevant.