Windows Dev Center

Guidelines for buttons

A button gives the user a way to trigger an immediate action.

Example of buttons

Example

Example of buttons, used in a dialog

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 Back button.

Recommendations

  • 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.
  • 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 while the app is running; for example, don't change the text of a button that says "Next" to "Continue".
  • Don't swap the default submit, reset, and button styles.
  • Don't put too much content inside a button. 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 only)

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 (HTML)
button
input type=button
input type=submit
For developers (XAML)
Button class

 

 

Show:
© 2015 Microsoft