Versions Compared

Key

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

...

Example for a table with a row of buttons from different types (icon, Icon + name, split) at the top

...

Image Added

Types

...

Type

...

Image

...

Dialog buttons

Image RemovedUsed for either main or secondary actions on the page/pane/dialog

Icon buttons

Image Removed

Used for toolbars and displays where words won’t comfortably fit alongside icons.

Split buttons

Image RemovedUsed when there are several possible related actions, and one main action (e.g most frequently used).

Toggle buttons

Image RemovedUsed to quickly switch between two possible (e.g. ON/OFF)

Ribbon buttons

Image Removed

Used in the ribbon pattern. see Ribbon button.

...

Interaction (general for all buttons)

When hovering, Mouse cursor change

...

from pointer

...

Image Added

...

To Hand

Image Added

  • Clicking (pressing and releasing the left mouse button) on the button target area,  will initiate its action

...