GitHub

Button

PreviousNext

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

Full
InteractiveButton demo
<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 Gpui.Icon.Copy}" />
  </Button>
  <Button Content="Disabled" IsEnabled="False" />
</WrapPanel>

Usage

The theme covers Button in full. 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.

GroupClasses
Colorprimary, secondary, danger, warning, success, info, ghost, link, text (none is Default)
Modifieroutline, compact, selected, icon-only
Sizexsmall, small, large (medium is the default)
Cornersrounded-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), as GPUI Kit does not focus a button on a pointer press.

Examples

Every color, including the paddingless link and text variants.

Variants
InteractiveButton demo: Variants
<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.

Sizes
InteractiveButton demo: Sizes
<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.

Outline
InteractiveButton demo: Outline
<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.

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

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

Compact
InteractiveButton demo: Compact
<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.

Rounded
InteractiveButton demo: Rounded
<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.

Disabled
InteractiveButton demo: Disabled
<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>

Not covered

  • The loading state.
  • The Custom variant (set Background, Foreground and BorderBrush directly instead).
  • A dropdown caret on a plain Button (use SplitButton; see Dropdown Button).
  • The toggled state (use ToggleButton; see Toggle).