Guidelines for buttons
Windows app: button states
Windows Phone app: button states
A button, also known as a command button, gives the user a way to trigger an immediate action.
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
- 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).
Send a user input to a server or perform an action, such as saving form data and going to the next app page.
Clear a form or page of user input.
Create a customized command or action.
- For designers
- Guidelines for buttons
- Guidelines for radio buttons
- Guidelines for toggle switches
- Guidelines for checkboxes
- Guidelines for the select control
- For developers (HTML)
- input type=button
- input type=submit
- For developers (XAML)
- Button class