badge

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -46,6 +46,10 @@
                 <FluentNavLink Href="compoaccordion" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Accordion</FluentNavLink>
                 <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>
+                </FluentNavGroup>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoBadge.razor

@@ -0,0 +1,57 @@
+@page "/compobadged"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Badge</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentBadge</code> component is used to highlight an item and attract attention or flag status.
+The <code>FluentBadge</code> comppmemt wraps a web component <code>badge</code>. 
+
+<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Horizontal">
+        <FluentBadge Appearance="Appearance.Lightweight" OnClick="@(e => amessage = "Lightweight badge clicked.")">Lightweight</FluentBadge>
+        <FluentBadge Appearance="Appearance.Accent">Accent</FluentBadge>
+        <FluentBadge Appearance="Appearance.Neutral">Neutral</FluentBadge>
+        <FluentBadge BackgroundColor="red" Color="white">Red and white</FluentBadge>
+        <FluentBadge Appearance="Appearance.Neutral" OnDismissClick="@(e => amessage = "Dismissed!")">Dismiss</FluentBadge>
+    </FluentStack>
+    <p><b>Message</b>: @amessage?.ToString()</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Circular</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Horizontal">
+        <FluentBadge Appearance="Appearance.Accent" Circular="true">Accent</FluentBadge>
+        <FluentBadge Appearance="Appearance.Neutral" Circular="true">Neutral</FluentBadge>
+    </FluentStack>
+</FluentCard>
+
+<style>
+    fluent-badge {
+        --badge-fill-highlight: #ffd800;
+        --badge-fill-lowlight: #333;
+        --badge-color-highlight: #000;
+        --badge-color-lowlight: #fff;
+    }
+</style>
+
+<FluentLabel class="my-3" Typo="Typography.H4">With custom css for Fill and Highlight</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Horizontal">
+        <FluentBadge Appearance="Appearance.Accent" Fill="highlight">Accent</FluentBadge>
+        <FluentBadge Appearance="Appearance.Neutral" Fill="lowlight">Neutral</FluentBadge>
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">In a slot</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentButton Appearance="Appearance.Neutral">
+        More options...
+        <FluentBadge Appearance="Appearance.Accent" slot="end">New!</FluentBadge>
+    </FluentButton>
+</FluentCard>
+
+@code {
+    string amessage = string.Empty;
+}