counter badge

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -47,8 +47,8 @@
                 <FluentNavLink Href="compoanchor" Icon="@(new Icons.Regular.Size20.LinkMultiple())" IconColor="Color.Accent">Anchor</FluentNavLink>
                 <FluentNavLink Href="compoappbar" Icon="@(new Icons.Regular.Size20.AppsList())" IconColor="Color.Accent">AppBar</FluentNavLink>
                 <FluentNavGroup Icon="@(new Icons.Regular.Size20.Tag())" Expanded="false" Title="Badge">
-                    <FluentNavLink Href="compobadged" Icon="@(new Icons.Regular.Size20.Badge())" IconColor="Color.Accent">Badge</FluentNavLink>
-                    <FluentNavLink Href="compocounterbadged" Icon="@(new Icons.Regular.Size20.NumberCircle1())" IconColor="Color.Accent">CounterBadge</FluentNavLink>
+                    <FluentNavLink Href="compobadge" Icon="@(new Icons.Regular.Size20.Badge())" IconColor="Color.Accent">Badge</FluentNavLink>
+                    <FluentNavLink Href="compocounterbadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())" IconColor="Color.Accent">CounterBadge</FluentNavLink>
                 </FluentNavGroup>
 
             </FluentNavGroup>

BlazorFluentUI/Components/Pages/Components/CompoBadge.razor

@@ -1,4 +1,4 @@
-@page "/compobadged"
+@page "/compobadge"
 
 @rendermode RenderMode.InteractiveServer
 

BlazorFluentUI/Components/Pages/Components/CompoCounterBadge.razor

@@ -0,0 +1,54 @@
+@page "/compocounterbadge"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">CounterBadge</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentCounterBadge</code> component is used to display a notification count on top of another compoenent.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack>
+        <FluentCounterBadge Count="100" Appearance="Appearance.Accent">
+            <FluentButton>
+                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="Color.Neutral" />
+            </FluentButton>
+        </FluentCounterBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentCounterBadge Count="5"
+                            Appearance="Appearance.Neutral"
+                            HorizontalPosition="-25"
+                            VerticalPosition="-25">
+            <FluentButton Appearance="Appearance.Accent">
+                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="Color.Fill" />
+            </FluentButton>
+        </FluentCounterBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentCounterBadge Count="5"
+                            Appearance="Appearance.Lightweight">
+            <FluentButton Appearance="Appearance.Accent">
+                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="Color.Fill" />
+            </FluentButton>
+        </FluentCounterBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentCounterBadge Count="5" Appearance="Appearance.Lightweight" BackgroundColor="Color.Lightweight" Color="Color.Error">
+            <FluentButton Appearance="Appearance.Accent">
+                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
+            </FluentButton>
+        </FluentCounterBadge>
+
+        <FluentSpacer Width="25" />
+        <FluentCounterBadge Count="9" BackgroundColor="@Color.Error" Color="Color.Fill">
+            <FluentButton Appearance="Appearance.Neutral">
+                <FluentIcon Value="@(new Icons.Regular.Size24.Mail())" Color="@Color.FillInverse" />
+            </FluentButton>
+        </FluentCounterBadge>
+    </FluentStack>
+</FluentCard>
+
+
+@code {
+}