Table of contents
Collapse the table of content
Expand the table of content


Last Updated: 9/19/2016

A button gives the user a way to trigger an immediate action.

Example of buttons

Is this the right control?

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. See Hyperlinks for more info.

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.


This example uses two buttons, Close all and Cancel, in a dialog in the Microsoft Edge browser.

Example of buttons, used in a dialog

Create a button

This example shows a button that responds to a click.

Create the button in XAML.

<Button Content="Submit" Click="SubmitButton_Click"/>

Or create the button in code.

Button submitButton = new Button();
submitButton.Content = "Submit";
submitButton.Click += SubmitButton_Click;

// Add the button to a parent container in the visual tree.

Handle the Click event.

private async void SubmitButton_Click(object sender, RoutedEventArgs e)
    // Call app specific code to submit form. For example:
    // form.Submit();
    Windows.UI.Popups.MessageDialog messageDialog = 
        new Windows.UI.Popups.MessageDialog("Thank you for your submission.");
    await messageDialog.ShowAsync();

Button interaction

When you tap a Button with a finger or stylus, or press a left mouse button while the pointer is over it, the button raises the Click event. If a button has keyboard focus, pressing the Enter key or the Spacebar key also raises the Click event.

You generally can't handle low-level PointerPressed events on a Button because it has the Click behavior instead. For more info, see Events and routed events overview.

You can change how a button raises the Click event by changing the ClickMode property. The default ClickMode value is Release. If ClickMode is Hover, the Click event can't be raised with the keyboard or touch.

Button content

Button is a ContentControl. Its XAML content property is Content, which enables a syntax like this for XAML: <Button>A button's content</Button>. You can set any object as the button's content. If the content is a UIElement, it is rendered in the button. If the content is another type of object, its string representation is shown in the button.

Here, a StackPanel that contains an image of a banana and text is set as the content of a button.

<Button Click="Button_Click" 
        Height="100" Width="80">
        <Image Source="Assets/Slices.png" Height="62"/>
        <TextBlock Text="Orange"  Foreground="White"

The button looks like this.

A button with image and text content

Create a repeat button

A RepeatButton is a button that raises Click events repeatedly from the time it's pressed until it's released. Set the Delay property to specify the time that the RepeatButton waits after it is pressed before it starts repeating the click action. Set the Interval property to specify the time between repetitions of the click action. Times for both properties are specified in milliseconds.

The following example shows two RepeatButton controls whose respective Click events are used to increase and decrease the value shown in a text block.

    <RepeatButton Width="100" Delay="500" Interval="100" Click="Increase_Click">Increase</RepeatButton>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Decrease_Click">Decrease</RepeatButton>
    <TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" />
private static int _clicks = 0;
private void Increase_Click(object sender, RoutedEventArgs e)
    _clicks += 1;
    clickTextBlock.Text = "Number of Clicks: " + _clicks;

private void Decrease_Click(object sender, RoutedEventArgs e)
    if(_clicks > 0)
        _clicks -= 1;
        clickTextBlock.Text = "Number of Clicks: " + _clicks;


  • 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).

Back buttons

The back button is a system-provided UI element that enables backward navigation through either the back stack or navigation history of the user. You don't have to create your own back button, but you might have to do some work to enable a good backwards navigation experience. For more info, see History and backwards navigation

Get the samples

© 2016 Microsoft