Introducing the new .NET MAUI Button Control
Tags: dotnetmaui, mobile, desktop, whatsnew
Published: 2023-10-03 15:27:54

---
title: Introducing the new .NET MAUI Button Control
published: true
date: 2023-09-26 10:51:44 UTC
tags: dotnetmaui, mobile, desktop, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/new-dotnet-maui-button-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7itpfcf31d2iw046h7t.png
---
Get ready to revolutionize your .NET MAUI applications with the all-new Syncfusion [.NET MAUI Button control](https://www.syncfusion.com/maui-controls/maui-button ".NET MAUI Button"), unveiled in our latest release, [2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio 2023 Volume 3"). It isn’t just a button; it’s a powerhouse of customization. With features that allow you to set icons, background images, and corner edge radii, you can create a button that truly represents your brand. Plus, you can tailor the appearance for different visual states with the Visual State Manager.

Let’s explore the key features of this groundbreaking .NET MAUI Button control and the steps to get started with it.

## Key features

The .NET MAUI Button control supports many user-friendly features. Some of them are:

- [Image support](#Image)
- [Custom content](#Custom)
- [Font customizations](#Font)
- [Border customizations](#Border)
- [UI customizations](#UI)

###<a name="Image">Image support</a>

Incorporating images into your mobile app’s buttons can greatly enhance their visual appeal. The .NET MAUI Button control supports image integration, allowing you to create a sophisticated appearance that aligns perfectly with your app’s style.

#### ShowIcon

With the [ShowIcon](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ShowIcon "ShowIcon property of .NET MAUI Button Control") property, you can easily enable or disable the display of an icon image within the Button control. This provides flexibility in choosing when to show or hide the associated image.

#### ImageSource

The [ImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ImageSource "ImageSource property of .NET MAUI Button Control") property allows you to customize the Button icon image by adding a custom image, giving you complete control over the visual representation.

#### ImageSize and ImageAlignment

You can fine-tune the width and alignment of the icon image using the [ImageSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ImageSize "ImageSize property of .NET MAUI Button Control") and [ImageAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_ImageAlignment "ImageAlignment property of .NET MAUI Button Control") properties, respectively. You can position the icon at the button’s start, end, top, bottom, left, or right positions, providing extensive design possibilities.

![Customizing the Image Icon Position in the .NET MAUI Button](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-the-Image-Icon-Position-in-the-.NET-MAUI-Button.png)
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-the-Image-Icon-Position-in-the-.NET-MAUI-Button-Control.png" alt="Customizing the Image Icon Position in the .NET MAUI Button Control" style="width:100%">

  <figcaption>Customizing the Image Icon Position in the .NET MAUI Button Control</figcaption>

</figure>

#### Background image support

The .NET MAUI Button control allows you to customize the background using the [BackgroundImageSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_BackgroundImageSource "BackgroundImageSource property of .NET MAUI Button Control") property.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Adding-a-Background-Image-in-the-.NET-MAUI-Button-Control.png" alt="Adding a Background Image in the .NET MAUI Button Control" style="width:100%">

  <figcaption>Adding a Background Image in the .NET MAUI Button Control</figcaption>

</figure>

###<a name="Custom">Custom content</a>

With the .NET MAUI Button control, you can use any custom views as templates, enabling you to create buttons with unique and complex content.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Content-in-.NET-MAUI-Button-Control.png" alt="Customizing Content in .NET MAUI Button Control" style="width:100%">

  <figcaption>Customizing Content in .NET MAUI Button Control</figcaption>

</figure>

###<a name="Font">Font customizations</a>

Tailor the font style and appearance to your specific needs with the [FontSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontSize "FontSize property of .NET MAUI Button Control"), [FontFamily](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontFamily "FontFamily property of .NET MAUI Button Control"), [FontAttributes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_FontAttributes "FontAttributes property of .NET MAUI Button Control"), and [TextColor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ButtonBase.html#Syncfusion_Maui_Core_ButtonBase_TextColor "TextColor property of .NET MAUI Button Control") properties. Whether you require pixel precision or standard options like small, medium, or large fonts, the choice is yours.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Font-Customizations-in-.NET-MAUI-Button-Control.png" alt="Font Customizations in .NET MAUI Button Control" style="width:100%">

  <figcaption>Font Customizations in .NET MAUI Button Control</figcaption>

</figure>

###<a name="Border">Border customizations</a>

Buttons often need distinctive borders to stand out. The .NET MAUI Button control also supports customizing its various border elements.

#### Border color

The border color of the Button can easily be customized to any desired color.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Border-Color-in-.NET-MAUI-Button-Control.png" alt="Customizing Border Color in .NET MAUI Button Control" style="width:100%">

  <figcaption>Customizing Border Color in .NET MAUI Button Control</figcaption>

</figure>

#### Border thickness

Control the thickness of the Button’s border, allowing for variations in visual style. If a border is not needed, you can remove it altogether.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Border-Width-in-.NET-MAUI-Button-Control.png" alt="Customizing Border Width in .NET MAUI Button Control" style="width:100%">

  <figcaption>Customizing Border Width in .NET MAUI Button Control</figcaption>

</figure>

#### Corner radius

Create buttons with rounded edges by customizing the corner radii, adding a touch of elegance to your app’s design.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Corner-Radii-in-.NET-MAUI-Button-Control.png" alt="Customizing Corner Radii in .NET MAUI Button Control" style="width:100%">

  <figcaption>Customizing Corner Radii in .NET MAUI Button Control</figcaption>

</figure>

###<a name="UI">UI customizations</a>

The .NET MAUI Button control offers various visual styles to cater to your app’s specific needs. Let’s see them.

#### Primary buttons

A primary button is the default button style with an accent color as the background.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Primary-Button.png" alt=".NET MAUI Primary Button" style="width:100%">

  <figcaption>.NET MAUI Primary Button</figcaption>

</figure>

#### Normal buttons

A normal button is a button with a traditional look and appearance.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Normal-Button.png" alt=".NET MAUI Normal Button" style="width:100%">

  <figcaption>.NET MAUI Normal Button</figcaption>

</figure>

#### Flat buttons

For a sleek and minimalistic design, you can customize the .NET MAUI Button control to be devoid of border or background color. This allows for a clean, uncluttered aesthetic that focuses on functionality.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Flat-Button.png" alt=".NET MAUI Flat Button" style="width:100%">

  <figcaption>.NET MAUI Flat Button</figcaption>

</figure>

#### Outline buttons

You can create a unique and crisp appearance for the Button by defining an outline with a border while opting for no background color.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Outline-Button.png" alt=".NET MAUI Outline Button" style="width:100%">

  <figcaption>.NET MAUI Outline Button</figcaption>

</figure>

#### Icon buttons

The .NET MAUI Button control empowers users to add icons and captions to it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Icon-Button.png" alt=".NET MAUI Icon Button" style="width:100%">

  <figcaption>.NET MAUI Icon Button</figcaption>

</figure>

#### Circular buttons

You can craft a unique style by defining the shape of a button with rounded edges and incorporating font icons. This customization offers a distinctive and appealing aesthetic to your user interface.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/NET-MAUI-Circular-Button.png" alt=".NET MAUI Circular Button" style="width:100%">

  <figcaption>.NET MAUI Circular Button</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Button documentation.](https://help.syncfusion.com/maui/button/overview "Getting started with the .NET MAUI Button")

## Getting started with the .NET MAUI Button control

We have seen the key features of the .NET MAUI Button control. Now let’s learn how to integrate it into your .NET MAUI app and utilize its features:

### Step 1: Create a .NET MAUI app

First, create a [.NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Building your first .NET MAUI app").

### Step 2: Add the required NuGet package

Syncfusion .NET MAUI controls are available on the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI Button control to your project, open the  **NuGet package manager**  in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"). Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons "Syncfusion.Maui.Buttons NuGet package") and then install it.

### Step 3: Register the handler

Register the handler for the Syncfusion core in the  **MauiProgram.cs**  file.

```csharp
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace ButtonSample
{
  public static class MauiProgram
  {
	public static MauiApp CreateMauiApp()
	{
	   var builder = MauiApp.CreateBuilder();
	   builder
	      .UseMauiApp<App>()
	      .ConfigureSyncfusionCore()
	      .ConfigureFonts(fonts =>
	      {
	         fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	      });
	   return builder.Build();
        }
   }
}
```

### Step 4: Add the namespace

Add the **Syncfusion.Maui.Buttons** namespace in your XAML page.

```xml
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
```

### Step 5: Initialize the Syncfusion .NET MAUI Button control

Finally, initialize the Syncfusion .NET MAUI Button control. Refer to the following code example.

```xml
<buttons:SfButton x:Name="button" WidthRequest="100" Text = "Click me" TextColor ="White"/>
```

After executing these code examples, we’ll get a button control like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Integrating-the-Button-Control-in-the-.NET-MAUI-Application.png" alt="Integrating the Button Control in the .NET MAUI Application" style="width:100%">

  <figcaption>Integrating the Button Control in the .NET MAUI Application</figcaption>

</figure>

## GitHub references

For more details, refer to the [.NET MAUI Button Control demo on GitHub](https://github.com/SyncfusionExamples/maui-button-samples ".NET MAUI Button control GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion [.NET MAUI Button control](https://www.syncfusion.com/maui-controls/maui-button ".NET MAUI Button") that rolled out in the [2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio 2023 Volume 3") release. You can learn more about the latest .NET MAUI advancements on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page") pages. Try them out and leave your feedback in the comments section below!

Download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Get free evaluation of the Essential Studio for .NET MAUI") to start evaluating them immediately.

If you have any questions, you can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to help you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3.aspx "Blog: Syncfusion Essential Studio 2023 Volume 3 Is Here!")
- [Introducing the New .NET MAUI CheckBox Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-checkbox-control.aspx "Blog: Introducing the New .NET MAUI CheckBox Control")
- [Introducing the New .NET MAUI Radio Button Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-radio-button.aspx "Blog: Introducing the New .NET MAUI Radio Button Control")
- [Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to Identify Key Customer Complaints](https://www.syncfusion.com/blogs/post/dotnet-maui-pareto-chart-for-customer-complaints.aspx "Blog: Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to Identify Key Customer Complaints")