Button control design guidelines for Windows Phone

July 21, 2014

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

A Button control causes an app to perform an action when the user taps it.

Button

Button controls

This topic contains the following sections.

A Button control is usually rectangular in shape. Standard layouts include a label or image. Customization of the shape of the Button control is constrained to specific scenarios. For more info, see Design Guidelines later in this topic.

When the user taps a Button control, it triggers an action or a chain of actions. A Button control reinforces its behavior by using different states like normal, inactive, and pushed. In the pushed state, the Button control will change its visual appearance to communicate that the user is interacting with it. The most common use of a Button control is to react and trigger an action after the user has raised his finger off the Button control. In some scenarios, the Button control could also trigger an action when the finger of the user first initiates contact, rather than waiting for the finger to lift.

Button controls are used to provide the user a way to trigger an action. In most cases, only one or two Button controls should be exposed to the user at the same time, such as Accept and Cancel, for example. When there’s a need to expose three or more actions to the user, consider using CheckBox or RadioButton controls instead, and then use a single Button control to trigger the selected actions.

Whether you use CheckBox controls alone or in dependent groups, make their purpose and their current state clear. To that end, follow these guidelines when you design CheckBox controls:

  • The Button control should never include more than two words.

  • Always use the system font unless brand guidelines tell you to use another font.

  • Button control text should be concise and typically be a verb.

  • Button control text may be dynamic.

  • The Windows Phone design catalog of controls has a rich selection of different button mechanisms that, depending on a particular app scenario, could be used instead of a Button control. For example, ApplicationBarIconButton controls have a substantially different look and feel compared to a Button control, but they act the same way. Consider adding an ApplicationBarIconButton control to enable the user to trigger an action that needs to be available across multiple screens within the app instead of repeating the use of a Button control across multiple screens. Also, consider the use of other button mechanisms depending on your user interface needs: CheckBox, RadioButton, or HyperlinkButton.

Show:
© 2014 Microsoft