# How to Create a Loading Button

You can create a loading button using the Telerik .NET MAUI TemplatedButton. The loading indicator displays inside the button when users click or tap the button.

The following `.gif` shows the loading button:

![.NET MAUI TemplatedButton Loading Button](https://www.telerik.com/maui-ui/documentation/assets/bdb965f3600211fe96ccfeeb146f5deb/templatedbutton-loading-button.gif "Loading Button")

## Solution

To create a loading button, use a `RadTemplatedButton` with a `ContentTemplate`. Then inside the `ContentTemplate` define a `RadBusyIndicator`.

**1.** Define the button in XAML:

```XAML
<VerticalStackLayout HorizontalOptions="Center">
    <telerik:RadTemplatedButton Content="{Binding}"
                                TextColor="Black"
                                Background="#FAFAFA"
                                BorderBrush="LightGray"
                                BorderThickness="1"
                                Command="{Binding Command}"
                                HorizontalOptions="Center">
        <telerik:RadTemplatedButton.ContentTemplate>
            <DataTemplate>
                <Grid ColumnDefinitions="Auto, *" HorizontalOptions="Center">
                    <telerik:RadBusyIndicator AnimationContentHeightRequest="16"
                                              AnimationContentColor="#80CBC4"
                                              AnimationContentWidthRequest="16"
                                              AnimationType="Animation4"
                                              IsBusy="{Binding IsLoading}"
                                              IsVisible="{Binding IsLoading}"
                                              Margin="0, 0, 10, 0" />
                    <Label Grid.Column="1"
                           Text="{Binding Text}"
                           TextColor="{Binding Source={RelativeSource AncestorType={x:Type telerik:RadTemplatedButton}}, Path=TextColor}" />
                </Grid>
            </DataTemplate>
        </telerik:RadTemplatedButton.ContentTemplate>
    </telerik:RadTemplatedButton>
    <VerticalStackLayout.BindingContext>
        <local:LoadingButtonViewModel/>
    </VerticalStackLayout.BindingContext>
</VerticalStackLayout>
```

**2.** Add the `telerik` namespace:

```XAML
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
```

**3.** Define the `ViewModel`:

```C#
public class LoadingButtonViewModel : NotifyPropertyChangedBase
{
    private const string NormalText = "Click to update data";
    private const string LoadingText = "Updating data";
    private Command command;
    private bool isLoading;
    private string text = NormalText;

    public LoadingButtonViewModel()
    {
        this.Command = new Command(ExecuteCommand, CanExecuteCommand);
    }

    public Command Command
    {
        get => this.command;
        set => UpdateValue(ref this.command, value);
    }

    public bool IsLoading
    {
        get => this.isLoading;
        set
        {
            if (this.UpdateValue(ref this.isLoading, value))
            {
                this.Text = this.isLoading ? LoadingText : NormalText;
                this.command.ChangeCanExecute();
            }
        }
    }

    public string Text
    {
        get => this.text;
        set => this.UpdateValue(ref this.text, value);
    }

    private async void ExecuteCommand()
    {
        this.IsLoading = true;
        await Task.Delay(TimeSpan.FromSeconds(5));
        this.IsLoading = false;
    }

    private bool CanExecuteCommand()
    {
        return !this.IsLoading;
    }
}
```

## Additional Resources

* [Configure the TemplatedButton](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/configuration)
* [Set Visual States](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/visual-states)
* [Events](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/events)
* [Execute Command](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/command)
* [Style the TemplatedButton](https://www.telerik.com/maui-ui/documentation/controls/templatedbutton/styling)

## See Also

* [.NET MAUI TemplatedButton Product Page](https://www.telerik.com/maui-ui/templatedbutton)
* [.NET MAUI TemplatedButton Forum Page](https://www.telerik.com/forums/maui?tagId=2057)
* [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
* [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)