Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • The primary action should also be shown in the action menu.

  • The button has 2 modes of operations:

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

    • Fixed split button - the primary action is kept as the default, even when the user selects another option.

  • The action menu closes when the user makes a selection.

States

 

Regular

Enter

Regular

Split Buttons Regular-Regular.pngImage Added

Split Buttons - Regular.pngImage Removed

 

Split Buttons - Enter Regular.pngImage Modified

Hover

Split Buttons - Hover.pngImage RemovedSplit Buttons - Icon Hover.pngImage Removed

Split Buttons Hover-Regular.pngImage Added

 

Split Buttons Hover-Menu-Regular.pngImage Added

 

Split Buttons - Enter Hover.pngImage ModifiedSplit Buttons - Enter Hover Icon.pngImage Modified

Active

Split Buttons - Active.pngImage RemovedSplit Buttons - Icon Active.pngImage Removed

Split Buttons Active-Regular.pngImage Added

 

Split Buttons Menu-Active-Regular.pngImage Added
Split Buttons - Enter Selected.pngImage ModifiedSplit Buttons - Enter Selected Icon.pngImage Modified

Disabled

Split Buttons Disabled-Regular.pngImage Added

Split Buttons - Disabled.pngImage Removed

 

Split Buttons - Enter Disabled.pngImage Modified

Focused

Split Buttons - Focused.pngImage RemovedSplit Buttons - Focused Icon.pngImage Removed
Split Buttons Focused-Regular.pngImage Added

 

Split Buttons Menu-Focused-Regular.pngImage Added

 

Split Buttons - Enter Focused.pngImage ModifiedSplit Buttons - Enter Focused Icon.pngImage Modified

Focused, Hover

Split Buttons - Focused Hover.pngImage RemovedSplit Buttons - Focused Icon Hover.pngImage Removed

Split Buttons Focsed-Hover-Regular.pngImage Added

 

Split Buttons Menu-Focsed-Hover-Regular.pngImage Added

 

Split Buttons - Enter Focused Hover.pngImage ModifiedSplit Buttons - Enter Focused Icon Hover.pngImage Modified

Focused, Active

Split Buttons - Focused Active.pngImage RemovedSplit Buttons - Focused Icon Active.pngImage Removed
Split Buttons Focused-Active-Regular.pngImage Added

 

Split Buttons Focused-Active-Menu-Regular-2.pngImage Added
Split Buttons - Enter Focused Active.pngImage ModifiedSplit Buttons - Enter Focused Active Icon.pngImage Modified

Interaction

  • Clicking the left-hand action area triggers the primary action.

  • Clicking the right-hand drop-down arrow opens an action menu of alternative actions.

  • Clicking an action in the Action Menu triggers the related action.

...

...