button-howto-create-circle-button.md

title	page_title	description	type	slug	previous_url	res_type
Creating Circular Buttons	Rendering Circular Buttons - .NET MAUI Knowledge Base	Learn how to create, implement, and develop a circular button when using the Telerik UI for .NET MAUI Button control.	how-to	button-create-circle-button	/controls/button/howto/button-howto-create-circle-button	kb

Environment

Product	Progress® Telerik® UI for .NET MAUI Button
Product Version	0.2.0

Description

How can I create a circular Button based on the Button control for my Telerik UI for .NET MAUI project?

Solution

To create a circular button with the Telerik UI for .NET MAUI Button, adjust its Width, Height, and CornerRadius properties in the following way:

1. Set Width as equal to Height.
2. Set CornerRadius as half of the Width/Height value.

The following example demonstrates how to implement the suggested approach.

<telerik:RadButton WidthRequest="120"
   			   HeightRequest="120"                                
   			   Text="Circle Button"
   			   FontSize="Micro"
   			   TextColor="White"
   			   BackgroundColor="DarkBlue"
   			   CornerRadius="60"  />

1. Add the namespace:

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

The following image shows the end result.