# Getting Started with WinUI Badge

This guide provides the information you need to start using the Telerik UI for WinUI Badge by adding the component to your project.

At the end, you will be able to achieve the following result.

![WinUI RadBadge RadBadgeView Example 1](https://www.telerik.com/winui/documentation/assets/a8d1748c88c6f55a65240ecb04e17d30/winui_radbadge-getting-started-1.png)

## Prerequisites

Before adding the Badge, you need to:

1. [Set up your WinUI project](https://www.telerik.com/winui/documentation/installation-and-deployment/systemrequirements).

2. Create your Telerik UI for WinUI application and install the Telerik UI for WinUI components depending on the required installation approach:

   * [Getting Started with NuGet](https://www.telerik.com/winui/documentation/getting-started/first-steps-nuget#step-2-create-the-winui-application)

   * [Getting Started with the MSI file](https://www.telerik.com/winui/documentation/getting-started/first-steps-msi#step-2-create-the-winui-application)

   * [Getting Started with the ZIP file](https://www.telerik.com/winui/documentation/getting-started/first-steps-zip#step-2-create-the-winui-application)

   * [Getting Started with the Telerik UI Visual Studio Extension](https://www.telerik.com/winui/documentation/getting-started/first-steps-vsextension#step-2-create-the-winui-application)

## Add the Assembly References

To use the `RadBadge` and `RadBadgeView` components, add references to `Telerik.WinUI.Controls.dll` and `Telerik.Licensing.Runtime.dll`.

## Define the Component

The following example demonstrates how to define the Badge component. You can access the Badge through the `xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"` alias that points to the `Telerik.UI.Xaml.Controls.Primitives` namespace.

#### **Define the Badge**

```XAML
<primitives:RadBadge BadgeType="Default"/>
```

The following image shows the end result.

![WinUI RadBadge RadBadge Example](https://www.telerik.com/winui/documentation/assets/9c4cdec8660b671232839b26a4743a1f/winui_radbadge-getting-started-0.png)

## Define the RadBadgeView

The `RadBadgeView` component is a container for adding the content of the Badge and its position based on this content.

The following example demonstrates how to define the `RadBadgeView` component. You can access the `RadBadgeView` component through the `xmlns:core="using:Telerik.UI.Xaml.Controls"` alias that points to the `Telerik.UI.Xaml.Controls.Primitives` namespace.

#### **Define the RadBadgeView**

```XAML
<primitives:RadBadgeView BadgePosition="1,1" BadgeAnchorPosition="0,0.5" >
	<Button Content="Click" Width="60" Height="30"/>
	<primitives:RadBadgeView.Badge>
		<primitives:RadBadge x:Name="badgeButton" Background="Violet" Content="678" Geometry="{core:Geometry Type=Ellipse}" Width="36" Height="24" />
	</primitives:RadBadgeView.Badge>
</primitives:RadBadgeView>
```

The following image show the end result.

![WinUI RadBadge RadBadgeView Example](https://www.telerik.com/winui/documentation/assets/a8d1748c88c6f55a65240ecb04e17d30/winui_radbadge-getting-started-1.png)

## Telerik UI for WinUI Learning Resources

* [Telerik UI for WinUI Badge Component](https://www.telerik.com/winui/badge)
* [Getting Started with Telerik UI for WinUI Components](https://www.telerik.com/winui/documentation/getting-started/first-steps-nuget)
* [Telerik UI for WinUI Installation](https://www.telerik.com/winui/documentation/installation-and-deployment/installing-which-file-do-i-need)
* [Telerik UI for WinUI Examples](https://www.telerik.com/winui/documentation/examples/demos-app)
* [Telerik UI for WinUI Accessibility](https://www.telerik.com/winui/documentation/common/accessibility)
* [Telerik UI for WinUI License Agreement](https://www.telerik.com/purchase/license-agreement/winui)

## See Also

* [Styling Options](https://www.telerik.com/winui/documentation/controls/radbadge/styling)
* [View Settings](https://www.telerik.com/winui/documentation/controls/radbadge/view)