Versions Compared

Key

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

...

Buttons allow the user to perform a defined single action, such as navigating to a different view, choosing an option, or completing a task. These actions are always in context, relating to the container it's located in, such as a screen, form, wizard, popup, popover, etc..

...

Types

Type

Image

Usage

Dialog Buttons

Image Modified

Use for primary and secondary actions.

Icon Buttons

Image Modified

Use in areas where dialog buttons won’t comfortably fit, such as toolbars and tables.

Split Buttons

Image Modified

Use when there are multiple related actions, with one primary action (e.g. the most frequently used).

Switch Buttons

Image Modified

Use to quickly switch between binary options, e.g. On/Off.

Ribbon Buttons

Image Modified

Use within the /wiki/spaces/UserExp/pages/1390479038 component.

Usage & Behavior

General guidelines

...

As per each individual button type.

Button menus

For large button menus, :

  • up to 3 primary actions should be shown at top level.

...

  • additional, secondary buttons should be grouped within a

...

  • contextual Action Menu, shown to the right of the primary buttons.

...

Content

Button labels tell users what will happen when they click the button.

...