Button

A button in every color, modifier and size, as classes on Avalonia's Button.

ExampleInteractive

Button — Avalonia UIKit

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Content="Default" />
  <Button Classes="primary" Content="Primary" />
  <Button Classes="secondary" Content="Secondary" />
  <Button Classes="danger" Content="Danger" />
  <Button Classes="ghost" Content="Ghost" />
  <Button Classes="link" Content="Link" />
  <Button Classes="primary outline" Content="Outline" />
  <Button Classes="icon-only ghost">
    <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
  </Button>
  <Button Content="Disabled" IsEnabled="False" />
</WrapPanel>

Usage

The theme covers Button. Every look is a class, and the classes combine, as in Classes="danger outline small". The content is text, a PathIcon, or both in a horizontal StackPanel.

Group	Classes
Color	`primary`, `secondary`, `danger`, `warning`, `success`, `info`, `ghost`, `link`, `text` (none is Default)
Modifier	`outline`, `compact`, `selected`, `icon-only`
Size	`xsmall`, `small`, `large` (medium is the default)
Corners	`rounded-none`, `rounded-small`, `rounded-large`, `rounded-full`

selected holds the selected colors, which a button with an open flyout shows too. link and text buttons have no height or padding, and a link is underlined only in its normal state. The focus ring shows on keyboard focus only (:focus-visible), not on a pointer press.

Two attached properties add states Avalonia's buttons lack. They work on Button and the controls derived from it (ToggleButton, RepeatButton, DropDownButton, HyperlinkButton), including the buttons inside a TextBox.

Property	Effect
`uikit:Buttons.IsLoading`	The button ignores the pointer, Enter, Space, access keys, `IsDefault` and `IsCancel`, raises no `Click` and runs no `Command`, yet stays enabled and focusable. It fades to 80%, keeps its normal colors under the pointer, and its icon turns into a spinning loader.
`uikit:Buttons.LoadingIcon`	The geometry the loading spinner turns (the Lucide loader by default).
`uikit:Buttons.TakesFocusOnPointer`	`False` keeps the focus where it was when the button is pressed with the pointer, so a `TextBox` keeps its focus and selection. Tab still focuses the button.

The icon that spins is a PathIcon that is the button's content, or the first child of a panel that is; a button without one only fades. LoadingIcon and TakesFocusOnPointer are inherited, so a container can set them for every button inside.

Examples

Every color, including the paddingless link and text variants.

VariantsInteractive

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Content="Default" />
  <Button Classes="primary" Content="Primary" />
  <Button Classes="secondary" Content="Secondary" />
  <Button Classes="danger" Content="Danger" />
  <Button Classes="warning" Content="Warning" />
  <Button Classes="success" Content="Success" />
  <Button Classes="info" Content="Info" />
  <Button Classes="ghost" Content="Ghost" />
  <Button Classes="link" Content="Link" />
  <Button Classes="text" Content="Text" />
</WrapPanel>

The four sizes; medium needs no class.

SizesInteractive

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Classes="xsmall" Content="Extra small" />
  <Button Classes="small" Content="Small" />
  <Button Content="Medium" />
  <Button Classes="large" Content="Large" />
</WrapPanel>

outline gives each color its outlined look.

OutlineInteractive

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Classes="outline" Content="Default" />
  <Button Classes="primary outline" Content="Primary" />
  <Button Classes="secondary outline" Content="Secondary" />
  <Button Classes="danger outline" Content="Danger" />
  <Button Classes="warning outline" Content="Warning" />
  <Button Classes="success outline" Content="Success" />
  <Button Classes="info outline" Content="Info" />
  <Button Classes="ghost outline" Content="Ghost" />
</WrapPanel>

icon-only makes a square button (20, 24 or 32px by size) for a PathIcon, in any color; an icon beside a label is a horizontal StackPanel as the content.

IconsInteractive

Live demo unavailable

<StackPanel Spacing="8">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="icon-only">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only primary">
      <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
    </Button>
    <Button Classes="icon-only secondary">
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </Button>
    <Button Classes="icon-only danger">
      <PathIcon Data="{StaticResource UIKit.Icon.Close}" />
    </Button>
    <Button Classes="icon-only ghost">
      <PathIcon Data="{StaticResource UIKit.Icon.Ellipsis}" />
    </Button>
    <Button Classes="icon-only outline">
      <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
    </Button>
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="icon-only xsmall">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only small">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only large">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="primary">
      <StackPanel Orientation="Horizontal" Spacing="6">
        <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
        <TextBlock Text="New file" />
      </StackPanel>
    </Button>
    <Button Classes="outline">
      <StackPanel Orientation="Horizontal" Spacing="6">
        <TextBlock Text="Open" />
        <PathIcon Data="{StaticResource UIKit.Icon.ExternalLink}" />
      </StackPanel>
    </Button>
  </WrapPanel>
</StackPanel>

compact narrows the padding and the minimum width at every size.

CompactInteractive

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Classes="compact xsmall" Content="OK" />
  <Button Classes="compact small" Content="OK" />
  <Button Classes="compact" Content="OK" />
  <Button Classes="compact large" Content="OK" />
  <Button Classes="compact primary" Content="Compact primary" />
  <Button Classes="compact outline" Content="Compact outline" />
</WrapPanel>

The corner classes replace the theme radius, from square to a pill.

RoundedInteractive

Live demo unavailable

<StackPanel Spacing="8">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="rounded-none" Content="None" />
    <Button Classes="rounded-small" Content="Small" />
    <Button Content="Medium" />
    <Button Classes="rounded-large" Content="Large" />
    <Button Classes="rounded-full" Content="Full" />
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="primary rounded-none" Content="None" />
    <Button Classes="primary rounded-small" Content="Small" />
    <Button Classes="primary" Content="Medium" />
    <Button Classes="primary rounded-large" Content="Large" />
    <Button Classes="primary rounded-full" Content="Full" />
  </WrapPanel>
</StackPanel>

IsEnabled="False" switches every variant to its disabled colors.

DisabledInteractive

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Content="Default" IsEnabled="False" />
  <Button Classes="primary" Content="Primary" IsEnabled="False" />
  <Button Classes="secondary" Content="Secondary" IsEnabled="False" />
  <Button Classes="danger" Content="Danger" IsEnabled="False" />
  <Button Classes="ghost" Content="Ghost" IsEnabled="False" />
  <Button Classes="link" Content="Link" IsEnabled="False" />
  <Button Classes="primary outline" Content="Outline" IsEnabled="False" />
</WrapPanel>

uikit:Buttons.IsLoading on buttons with an icon, an icon alone and a label alone, and one with LoadingIcon; the last button loads for two seconds when clicked.

LoadingInteractive

Live demo unavailable

<StackPanel Spacing="8">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="primary" uikit:Buttons.IsLoading="True">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
        <TextBlock Text="Saving" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Classes="outline" uikit:Buttons.IsLoading="True">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
        <TextBlock Text="Copying" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Classes="ghost icon-only" uikit:Buttons.IsLoading="True">
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </Button>
    <Button Content="Submit" uikit:Buttons.IsLoading="True" />
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="secondary" uikit:Buttons.IsLoading="True"
            uikit:Buttons.LoadingIcon="{StaticResource UIKit.Icon.LoaderCircle}">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
        <TextBlock Text="Syncing" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Classes="primary" Click="OnSave">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
        <TextBlock Text="Save" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
  </WrapPanel>
</StackPanel>

With uikit:Buttons.TakesFocusOnPointer="False" on their panel, the buttons change the text selected in the TextBox without taking the focus from it.

Keep focusInteractive

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="8" uikit:Buttons.TakesFocusOnPointer="False">
  <TextBox Name="Note" Width="220" Text="Select a word, press Upper" />
  <Button Classes="outline" Content="Upper" Click="OnUpper" />
  <Button Classes="outline" Content="Lower" Click="OnLower" />
</StackPanel>

Button

#Usage

#Examples

Usage

Examples