Command Buttons: Design Guidelines 

Clicking a command button immediately performs an action, such as opening another surface.

  • Use command buttons for user-initiated actions. That is, clicking a command button results in the immediate performance of an action. Such actions might include closing or extending a surface, applying changes, opening a dialog box, and so on.
  • When another control interoperates with a command button, such as the pairing of a text box and Browse button, denote the relationship by placing the command button in one of three places:
    • To the right of and top-aligned with the other control
    • Below and left-aligned with the other control
    • Between controls that interoperate (such as Add and Remove buttons between two interoperating list boxes)
      If multiple command buttons interoperate with the same control, lay them out horizontally, left-aligned under the control or top-aligned to its right.
      Art Image  
      Art Image
  • If you use command buttons to change the sequence of values in a list, use the text “Move Up” and “Move Down” for the button labels.
    Exception: Some control combinations, such as an Add/Remove layout on a property page, lack sufficient space for standard-sized Move Up/Move Down command buttons. In these cases, you may use the standard arrow icons in labels instead of text. Do not use custom bitmaps for the icons.
    Using arrow buttons in exception case
    Art Image
  • If the button provides direct access to a menu, include a triangular arrow similar to the one found in cascading menu titles.
    Art Image
  • In a secondary window, right-align the standard window command buttons (OK, Cancel, etc.) in a row along the bottom as shown. Do not use other types of controls besides command buttons in this row, and only use command buttons that affect the entire window. For example, a Help command button should open Help about the entire window and not about a specific control in the window.
    Placement of OK, Cancel, and Apply buttons in secondary window
    Art Image The button order is as follows, from left to right: Help (optional) / OK, or any command buttons that initiate action for the whole window / Cancel / Apply (optional). If a command button applies only to a particular control, group it with that control; do not place it in the button row.
    Exceptions: On pop-up error messages, center command buttons. In toolbar arrangements, buttons and other controls are typically left- or top-aligned, depending on the layout of the area.
    Centered command buttons on message box
    Art Image

See Also


Dialog Boxes
Layout Specifications: Win32
Layout Specifications: Windows Forms
Text Boxes