Guidelines for buttons
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 Back button.
- 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).
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