Skip to main content

Button

The Button control reacts to pointer actions and provides visual feedback in the form of a depressed state when the pointer is down. A pointer-down to pointer-release sequence is interpreted as a click, and you can configure this behavior through the ClickMode property.

You can handle a click by subscribing to the Click event in code-behind, or by binding an ICommand instance to the Command property. For guidance on binding to a command, see Adding interactivity.

Common properties​

PropertyDescription
ClickModeDescribes how the button should react to clicks.
CommandAn instance of ICommand to be invoked when the button is clicked.
CommandParameterThe parameter passed to the command when it is invoked.
ContentThe content to display inside the button. Can be text or any control.
FlyoutA Flyout that opens when the button is clicked.
IsPressedWhether the button is currently in a pressed state (read-only).
IsDefaultWhen true, the button is activated when the user presses Enter.
IsCancelWhen true, the button is activated when the user presses Escape.

Example​

This example shows a simple button and a C# code-behind click event handler.

<UserControl xmlns="https://github.com/avaloniaui"
             Padding="20">
  <Button Click="OnClick"
          HorizontalAlignment="Center"
          VerticalAlignment="Center">
    Press Me!
  </Button>
</UserControl>
Preview
Loading Avalonia Preview...

Binding to a command​

The preferred approach in MVVM is to bind the Command property to an ICommand in your view model:

<Button Content="Save" Command="{Binding SaveCommand}" />
[RelayCommand]
private void Save()
{
    _repository.Save(CurrentItem);
}

Command with a parameter​

<Button Content="Delete"
        Command="{Binding DeleteCommand}"
        CommandParameter="{Binding SelectedItem}" />

Disabling the button with CanExecute​

The button is automatically disabled when the command's CanExecute returns false:

[ObservableProperty]
[NotifyCanExecuteChangedFor(nameof(SaveCommand))]
private string _name = "";

[RelayCommand(CanExecute = nameof(CanSave))]
private void Save() { /* ... */ }

private bool CanSave() => !string.IsNullOrWhiteSpace(Name);

Button with icon​

<Button>
    <StackPanel Orientation="Horizontal" Spacing="6">
        <PathIcon Data="{StaticResource save_regular}" Width="16" />
        <TextBlock Text="Save" VerticalAlignment="Center" />
    </StackPanel>
</Button>

ClickMode​

The ClickMode property controls when the Click event fires:

ValueDescription
ReleaseClick fires on pointer release (default).
PressClick fires on pointer press.
HoverClick fires when the pointer enters the button.

IsDefault and IsCancel​

You can designate a button as the default action or the cancel action for a window or dialog. When you set IsDefault to true, the button activates when the user presses Enter. When you set IsCancel to true, the button activates when the user presses Escape.

<StackPanel Orientation="Horizontal" Spacing="8">
  <Button Content="OK" IsDefault="True" Command="{Binding ConfirmCommand}" />
  <Button Content="Cancel" IsCancel="True" Command="{Binding CancelCommand}" />
</StackPanel>

Button with a flyout​

You can attach a Flyout to a button so that clicking the button opens a popup:

<Button Content="Options">
  <Button.Flyout>
    <MenuFlyout>
      <MenuItem Header="Cut" />
      <MenuItem Header="Copy" />
      <MenuItem Header="Paste" />
    </MenuFlyout>
  </Button.Flyout>
</Button>

Click vs. PointerPressed​

Always use the Click event to determine whether a user has pressed a button, not PointerPressed. Click is the high-level event specific to Button, while PointerPressed is a low-level input event that Button handles internally (setting IsHandled to true). Because the event is marked as handled, your application will not receive PointerPressed from a Button the way it might from other controls.

For a full list of button events, see the Button events API reference.

Keyboard and accessibility​

Button is focusable by default and participates in tab navigation. When the button has keyboard focus, the user can activate it by pressing Space or Enter. Screen readers announce the button's Content as its accessible name, so make sure you provide meaningful text. If your button contains only an icon, set the AutomationProperties.Name attached property so assistive technologies can identify it:

<Button Command="{Binding SaveCommand}"
        AutomationProperties.Name="Save">
  <PathIcon Data="{StaticResource save_regular}" Width="16" />
</Button>

Styling​

Button exposes several pseudo-classes you can target in styles:

Pseudo-classApplied when
:pointeroverThe pointer is hovering over the button.
:pressedThe button is being pressed.
:disabledThe button's IsEnabled is false.
:focusThe button has keyboard focus.
<Style Selector="Button.accent:pointerover">
  <Setter Property="Background" Value="{DynamicResource SystemAccentColorDark1}" />
</Style>

See also​

On this page