Button | ShellUI Native

Installation

bash

shellui-native add button

Platforms: MAUI · Avalonia. Also installs icon, button-variants.

Usage

Variants

<ui:Button Text="Default" />
<ui:Button Text="Secondary" Variant="Secondary" />
<ui:Button Text="Outline" Variant="Outline" />
<ui:Button Text="Ghost" Variant="Ghost" />
<ui:Button Text="Destructive" Variant="Destructive" />
<ui:Button Text="Link" Variant="Link" />

<ui:Button Text="Default" />
<ui:Button Text="Secondary" Variant="Secondary" />
<ui:Button Text="Outline" Variant="Outline" />
<ui:Button Text="Ghost" Variant="Ghost" />
<ui:Button Text="Destructive" Variant="Destructive" />
<ui:Button Text="Link" Variant="Link" />

Sizes

<ui:Button Text="Small" Size="Sm" />
<ui:Button Text="Default" />
<ui:Button Text="Large" Size="Lg" />
<ui:Button Icon="Settings" Size="Icon" Variant="Outline" />

<ui:Button Text="Small" Size="Sm" />
<ui:Button Text="Default" />
<ui:Button Text="Large" Size="Lg" />
<ui:Button Icon="Settings" Size="Icon" Variant="Outline" />

With an icon

Icon takes any name from the icon set; IconPosition puts it before or after the text.

<ui:Button Text="New project" Icon="Plus" />
<ui:Button Text="Continue" Icon="ArrowRight" IconPosition="Right" Variant="Outline" />

<ui:Button Text="New project" Icon="Plus" />
<ui:Button Text="Continue" Icon="ArrowRight" IconPosition="Right" Variant="Outline" />

Loading and disabled

While IsLoading is true the button shows a spinner and ignores clicks.

<ui:Button Text="Saving" IsLoading="True" />
<ui:Button Text="Disabled" Variant="Outline" IsEnabled="False" />

<ui:Button Text="Saving" IsLoading="True" />
<ui:Button Text="Disabled" Variant="Outline" IsEnabled="False" />

Events

Handle Clicked. It fires for a click, a tap, and Enter or Space while the button has keyboard focus.

csharp

SaveButton.Clicked += async (_, _) =>
{
    SaveButton.IsLoading = true;
    await SaveAsync();
    SaveButton.IsLoading = false;
};

MAUI and Avalonia

The same on both. For a full-width button, set HorizontalOptions="Fill" on MAUI and HorizontalAlignment="Stretch" on Avalonia.

API

Property	Type	Default	Description
`Variant`	`ButtonVariant`	`Default`	Visual style. One of `Default`, `Destructive`, `Outline`, `Secondary`, `Ghost`, `Link`.
`Size`	`ButtonSize`	`Default`	Size preset. One of `Default`, `Sm`, `Lg`, `Icon`.
`IsLoading`	`bool`	`false`	Shows a spinner and ignores clicks.
`Text`	`string`	—	Label text.
`Icon`	`IconName`	`None`	Lucide icon from `IconName`; `None` for no icon.
`IconPosition`	`IconPosition`	`Left`	Side of the text the icon sits on. One of `Left`, `Right`.

Event	Arguments	Description
`Clicked`	—	Clicked or tapped (or Enter / Space with keyboard focus).

Method	Description
`Press()`	Clicks in code, as a pointer click or Enter/Space would. Avalonia only.