# Button

The `Button` control is a [`ContentControl`](https://docs.avaloniaui.net/docs/controls/contentcontrol) which reacts to pointer presses.

A button notifies clicks by raising the [`Click`](http://reference.avaloniaui.net/api/Avalonia.Controls/Button/61B1E7A8) event. A click is distinct from a `PointerDown` event in that it is raised by default when the button is pressed and then released (although this behavior can be changed by setting the [`ClickMode`](http://reference.avaloniaui.net/api/Avalonia.Controls/ClickMode/) property).

Alternatively an instance of [`ICommand`](https://docs.microsoft.com/en-gb/dotnet/api/system.windows.input.icommand?view=netstandard-2.0) can be assigned or bound to the button's [`Command`](http://reference.avaloniaui.net/api/Avalonia.Controls/Button/4AAA993D) property. This command will be executed when the button is clicked. For more information see [binding to commands](http://reference.avaloniaui.net/api/Avalonia.Data/Binding/).

[`Click`](http://reference.avaloniaui.net/api/Avalonia.Controls/Button/61B1E7A8) is just one of several events that Buttons have. Another example is [`PointerEnter`](http://reference.avaloniaui.net/api/Avalonia.Input/InputElement/B4FED8A5) or [`PointerLeave`](http://reference.avaloniaui.net/api/Avalonia.Input/InputElement/0ABE1887). You can get the full list of Button Events [here](http://reference.avaloniaui.net/api/Avalonia.Controls/Button/#Events).

The Button control's full documentation can be found [here](http://reference.avaloniaui.net/api/Avalonia.Controls/Button/)

## Subclasses

1. [ToggleButton](http://reference.avaloniaui.net/api/Avalonia.Controls/DrawingPresenter/) - Toggles between checked and unchecked on click.

## Common Properties

| Property           | Description                                                            |
| ------------------ | ---------------------------------------------------------------------- |
| `ClickMode`        | Describes how the button should react to clicks                        |
| `Command`          | A command to be invoked when the button is clicked                     |
| `CommandParameter` | A parameter to be passed to `Command`                                  |
| `Content`          | The content to display in the button                                   |
| `IsDefault`        | When set, pressing the enter key clicks the button even if not focused |
| `IsPressed`        | Set when the button is depressed                                       |

## Pseudoclasses

| Pseudoclass | Description                      |
| ----------- | -------------------------------- |
| `:pressed`  | Set when the button is depressed |

## API Reference

[Button](http://reference.avaloniaui.net/api/Avalonia.Controls/Button/)

## Source code

[Button.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Button.cs)

## Examples

### Basic button

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
	<StackPanel>
		<Button Width="160" >My Button</Button>
	</StackPanel>
</Window>
```

produces following output with **Windows 10**\\

![Basic button](https://github.com/avaloniachina/Documentation/blob/master/docs/.gitbook/assets/button_basic%20\(1\).png)

### Colored button

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
	<StackPanel>
		<Button Width="200" Foreground="White" Background="Red">White text, red background</Button>
	</StackPanel>
</Window>
```

produces following output with **Windows 10**\\

![Colored button](https://github.com/avaloniachina/Documentation/blob/master/docs/.gitbook/assets/image%20\(18\)%20\(1\).png)

### Play button

Toggles between a "Play" icon and a "Pause" icon on click.

```markup
<UserControl.Resources>
    <Bitmap x:Key="Play">
        <x:Arguments>
            <x:String>/Assets/Player/Play.png</x:String>
        </x:Arguments>
    </Bitmap>
    <Bitmap x:Key="Pause">
        <x:Arguments>
            <x:String>/Assets/Player/Pause.png</x:String>
        </x:Arguments>
    </Bitmap>
</UserControl.Resources>
```

```markup
<Button Name="PlayButton" HorizontalAlignment="Center" Width="36" Command="{Binding PlayCommand}">
    <Panel>
        <Image Source="{DynamicResource Play}" IsVisible="{Binding !IsPlaying}" Width="20"
                          Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
        <Image Source="{DynamicResource Pause}" IsVisible="{Binding IsPlaying}" Width="20"
                          Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Panel>
</Button>
```

## Binding to a View Model Command

It is possible to bind a view model command to a simple method or with a ReactiveCommand. There are lots of advantages to the ReactiveCommand binding for all but the simplest user interfaces such as being able to pass an `IObservable<bool>` object in to have it dynamically calculate state. Both methods are displayed below. First the "simple" method binding:

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel>
        <Button Width="160" Command="{Binding OnClickCommand}">My Button</Button>
    </StackPanel>
</Window>
```

The Code in the bound View Model for the above will either look like:

```csharp
public void OnClickCommand()
{
	// do something
}
```

If using ReactiveCommands:

```csharp
public MainWindowViewModel()
{
	OnClickCommand = ReactiveCommand.Create(() => { /* do something */ });
}

public ReactiveCommand OnClickCommand { get; }
```

### Binding to Events

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel>
        <Button Width="160" 
                Click="OnButtonClick"
                PointerEnter="OnPointerEnter"
                Content="My Button"/>
    </StackPanel>
</Window>
```

The corresponding C# code in the View's cs file:

```csharp
private void OnButtonClick(object sender, RoutedEventArgs e)
{
	//do something on click
}

private void OnPointerEnter(object sender, PointerEventArgs e)
{
	//do something when pointer enters
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://avaloniachina.gitbook.io/avalonia/docs/controls/buttons/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.