Skip to end of banner
Go to start of banner

Split Buttons

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 28 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. 

Primary action

Menu

The icon which opens the menu acts as a Drop Down Menu

Content

The Action Text should address the primary action of the button. See additional guidelines in Main Buttons Content

See Drop Down Menu for the order of values.

Internal Logic

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

  • The primary action should appear also in the menu

  • The button has 2 modes of operations

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

    • Fixed split button - the primary is kept default no matter what the user selects in the menu

States

State

Image

Comment

Regular

Hover

Active

The menu closes once the user had selected the alternative action

Disabled

Error

Interaction

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

  • Clicking on the arrow exposes a menu of alternative actions

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 is commonly used

Don't Use:

  • For navigation (use Links instead)

  • When there are relatively many options (more than 5 or 6). Otherwise, consider using Action Menu

Future Version (TBD)

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

Accessibility compliance

In Focus state:

  • Clicking the Enter key will initiate the primary action

  • Clicking the down arrow will open the menu

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Zeplin link

Screen thumbnail

https://zpl.io/V4WPQ82

New LUX design 



  • No labels