Button control design guidelines for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
A Button control causes an app to perform an action when the user taps it.
.png)
Button controls
This topic contains the following sections.
- Appearance and action
- Detailed description
- Standard use
- Design guidelines
- Related Topics
Appearance and action
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.
Detailed description
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.
Standard use
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.
Design guidelines
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.