Windows apps
Collapse the table of content
Expand the table of content

Button

[This documentation is preliminary and is subject to change.]

Windows app: button states

Windows app: button states

Windows Phone app: button states

Windows Phone app: button states

Control description

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

Usage guidance

In general, only one or two buttons should be exposed 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. The default command button indicates the command button for the most common or recommended action. You should not use a command button to set state.

Appearance and interaction

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.

As the user interacts with a button, the button changes state and appearance, both of which serve as feedback for the user. Normal, pressed, and disabled are examples of button states.

A button's action is triggered 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.

Design guidelines

  • The purpose and state of a button should be clear to the user.
  • Button text content usually is a single word, a verb. It’s best to limit button text to two words.
  • 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.
  • Narrow, short, or tall command buttons with text content are best avoided.
  • 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.
  • Also consider using other button mechanisms, depending on your user interface needs: checkbox, radio button, or hyperlink.

Examples

A screenshot that illustrates the standard Button control

Related topics

input type=button element | input type=button object

Button class

 

 

Show:
© 2017 Microsoft