Guidelines for buttons

Applies to Windows and Windows Phone

Windows app: button states

Windows app: button states

Windows Phone app: button states

Windows Phone app: button states

Description

A button, also known as a command button, gives the user a way to trigger an immediate action.

Example

A screenshot that illustrates the standard Button control

Is this the right control?

A button lets the user initiate an immediate action, such as submitting a form.

Don't use a button when the action is to navigate to another page; use a link instead. Exception: For wizard navigation, use buttons labeled "Back" and "Next". For other types of backwards navigation or navigation to an upper level, use a button with the win-backbutton style.

Dos and don'ts

  • Make sure the purpose and state of a button are clear to the user.
  • Use a concise, specific, self-explanatory text that clearly describes the action that the button performs. Usually button text content is a single word, a verb.
  • If the button's text content is dynamic, for example, it is localized, consider how the button will resize and what will happen to controls around it.
  • For command buttons with text content, use a minimum button width.
  • Avoid narrow, short, or tall command buttons with text content.
  • Use the default font unless your brand guidelines tell you to use something different.
  • For an action that needs to be available across multiple pages within your app, instead of duplicating a button on multiple pages, consider using a bottom app bar.
  • When using AJAX to submit a form, use submit and override the form submit function so users can commit by pressing the enter key regardless of where the focus is in the form.
  • Expose only one or two buttons to the user at a time, for example, Accept and Cancel. If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions.
  • Use the default command button to indicate the most common or recommended action.
  • Consider customizing your buttons. A button's shape is rectangular by default, but you can customize the visuals that make up the button's appearance. A button’s content is usually text—for example, Accept or Cancel—but you could replace the text with an icon, or use an icon plus text.
  • Make sure that as the user interacts with a button, the button changes state and appearance to provide feedback to the user. Normal, pressed, and disabled are examples of button states.
  • Trigger the button's action when the user taps or presses the button. Usually the action is triggered when the user releases the button, but you also can set a button's action to trigger when a finger first presses it.
  • Don't use a command button to set state.
  • Don't change button text unless for localization.
  • Don't swap the default submit, reset, and button styles.
  • Don't put too much content inside a button. Although it can contain almost any other HTML element, such as tables and check boxes, too much content will confuse users. Make the content concise and easy to understand (nothing more than a picture and some text).

Additional usage guidance

Choosing the right type of button (Javascript and HTML)

There are three types of HTML button controls: submit, reset, and button. Follow these guidelines to choose the right type:

  • Submit

    Send a user input to a server or perform an action, such as saving form data and going to the next app page.

  • Reset

    Clear a form or page of user input.

  • Button

    Create a customized command or action.

    Inside a form, a button without any attributes acts as a submit if it is the first button inside the form.

Related topics

For designers
Guidelines for buttons
Guidelines for radio buttons
Guidelines for toggle switches
Guidelines for checkboxes
Guidelines for the select control
For developers (Windows Runtime apps using JavaScript and HTML)
button
input type=button
input type=submit
For developers (Windows Runtime apps using C#/VB/C++ and XAML)
Button class

 

 

Show:
© 2014 Microsoft. All rights reserved.