Follow these guidelines for adding buttons to your Windows Store app.
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.
Choosing the right type of button
There are 3 types of button controls: submit, reset, and normal buttons. Follow these guidelines to choose the right button type:
- Submit button
Use the submit button to send a user input to a server or perform an action, such as a "next" button that saves the form data and goes to the next app page.
- Reset: form reset
Use the reset button to clear a form or page of user input.
- Normal button: customized action
Use the normal button to trigger an action.
Inside a form, a button element without any attribute acts as submit button if it is the first button inside the form. If you want a normal button, set the button element's type attribute to "button".
Dos and Don'ts
| Do | Use a concise, specific, self-explanatory text that clearly describes the action that the button performs. |
|---|---|
| Customize the Normal and Submit buttons with text or images to make it clear to users what happens when they tap or click the button. | |
| When using AJAX to submit a form, use a submit button and override the form submit function so users can commit by pressing the enter key regardless of where the focus is in the form. | |
| Don't | Don't change the Reset button text, unless you need to change it for localization. The default English text for the reset button is "Reset". |
| Don't swap the default styles of the submit, reset, and normal buttons. | |
| Don't put too much content inside a button. Although the button element can contain almost any other HTML elements, such as tables and check boxes, putting too much content inside the button will confuse users. Make the content inside a button concise and easy to understand. A button should not contain anything more than a picture and some text. |
Build date: 11/29/2012