Skip to end of banner
Go to start of banner

Split Button

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 21 Next »

 Lead: Asaf Ben-OvedONGOING

Description

A split button couples a primary action with an attached dropdown menu of related actions

Usage & Behaviour

General guidelines

Structure

The split button is separated into two areas: the label/icon and the arrow icon. The separator between them signals that the two areas result in different actions. 

The icon which opens the menu acts as a menu (see more information in Drop Down Menu

Content

The label should address the primary action of the button. See additional guidelines in Buttons#Labels

For the items within the menu - by popularity.

Internal Logic

  • The primary action should appear in the menu, indicated as selected

  • The Displayed action and menu icon are treated as 2 distinct buttons with their own states
    See example for hover state:

Default Selection

The primary action should be the most common use case, while the dropdown menu shows a list of related actions

States

State

Image

Comment

Regular

Hover

the color of the button changes and the cursor indicates that you cannot click the split button

Active

Disabled

Error

Interaction

  • Clicking the primary action on the left, the action is activated.

  • clicking on the arrow, it exposes a menu of alternative actions

    • Clicking an action will commit the action and close the menu

If the split button is selected using keyboard actions and then Enter is pressed, the displayed action is activated.

Best practice

Use:

  • When there are many possible actions but only one primary action

  • If the actions are related and only one of the actions in commonly used

Don't Use:

  • For navigation, only for actions

  • When there are more than 5 action items in the menu

Future Version (TBD)

  • Semi enabled - When The menu can also contain specific disabled actions while the Primary is enabled and vice versa

  • Persistent split button - The default is kept until the user makes a different selection which then becomes the default.

Accessibility compliance

Focus management

The button is treated as 2 distinct buttons

  1. main/primary action

  2. menu - which opens a menu of actions

Design

Zeplin link

Screen thumbnail

https://zpl.io/V4WPQ82

New LUX design 




  • No labels