Ursa.Avalonia/demo/Ursa.Demo/Pages/BadgeDemo.axaml

<UserControl
    x:Class="Ursa.Demo.Pages.BadgeDemo"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:u="https://irihi.tech/ursa"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <StackPanel
        Margin="24"
        HorizontalAlignment="Left"
        ClipToBounds="False">
        <StackPanel.Styles>
            <Style Selector="u|Badge">
                <Setter Property="Margin" Value="14" />
            </Style>
        </StackPanel.Styles>
        <TextBlock Text="Hello" />
        <u:Badge
            HorizontalAlignment="Center"
            BadgeContent="500"
            OverflowCount="100">
            <Border
                Width="100"
                Height="50"
                Background="LightYellow" />
        </u:Badge>
        <StackPanel Orientation="Horizontal">
            <u:Badge BadgeContent="5" CornerPosition="TopLeft">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge BadgeContent="5" CornerPosition="TopRight">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge BadgeContent="5" CornerPosition="BottomLeft">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge BadgeContent="5" CornerPosition="BottomRight">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
        </StackPanel>
        <u:Badge BadgeContent="SUCCEED!">
            <Border
                Width="100"
                Height="50"
                Background="LightYellow" />
        </u:Badge>
        <u:Badge HorizontalAlignment="Stretch" BadgeContent="VIP">
            <Border Height="50" Background="LightYellow" />
        </u:Badge>
        <StackPanel Orientation="Horizontal">
            <u:Badge
                BadgeContent="VIP"
                CornerPosition="TopLeft"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge
                BadgeContent="VIP"
                CornerPosition="TopRight"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge
                BadgeContent="VIP"
                CornerPosition="BottomLeft"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge
                BadgeContent="VIP"
                CornerPosition="BottomRight"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <u:Badge BadgeContent="URSA" Classes="Primary">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge BadgeContent="URSA" Classes="Secondary">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge BadgeContent="URSA" Classes="Tertiary">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge BadgeContent="URSA" Classes="Warning">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge BadgeContent="URSA" Classes="Danger">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <u:Badge
                BadgeContent="URSA"
                Classes="Primary"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge
                BadgeContent="URSA"
                Classes="Secondary"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge
                BadgeContent="URSA"
                Classes="Tertiary"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge
                BadgeContent="URSA"
                Classes="Warning"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
            <u:Badge
                BadgeContent="URSA"
                Classes="Danger"
                Dot="True">
                <Border
                    Width="100"
                    Height="50"
                    Background="LightYellow" />
            </u:Badge>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <u:Badge VerticalAlignment="Center" BadgeContent="Hello" />
            <u:Badge
                VerticalAlignment="Center"
                BadgeContent="Hello"
                Dot="True" />
        </StackPanel>
    </StackPanel>
</UserControl>