button

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -52,6 +52,9 @@
                     <FluentNavLink Href="compopresencebadge" Icon="@(new Icons.Regular.Size20.CheckmarkCircle())" IconColor="Color.Accent">PresenceBadge</FluentNavLink>
                 </FluentNavGroup>
                 <FluentNavLink Href="compobreadcrumb" Icon="@(new Icons.Regular.Size20.FoodPizza())" IconColor="Color.Accent">Breadcrumb</FluentNavLink>
+                <FluentNavGroup Icon="@(new Icons.Regular.Size20.CursorHover())" Expanded="false" Title="Button">
+                    <FluentNavLink Href="compobutton" Icon="@(new Icons.Regular.Size20.ControlButton())" IconColor="Color.Accent">Button</FluentNavLink>
+                </FluentNavGroup>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoButton.razor

@@ -0,0 +1,59 @@
+@page "/compobutton"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Button</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentButton</code> component wraps a web HTML element of a <code>button</code>.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical" VerticalGap="10">
+        <FluentButton>Default</FluentButton>
+        <FluentButton Appearance="Appearance.Neutral">Neutral</FluentButton>
+        <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
+        <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
+        <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
+        <FluentButton Appearance="Appearance.Accent"
+                      Loading="@loading"
+                      OnClick="@StartLoadingAsync">
+            Loading
+        </FluentButton>
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">With Icons</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical" VerticalGap="10">
+        <FluentButton Appearance="Appearance.Neutral">
+            <FluentIcon Value="@(new Icons.Regular.Size32.AnimalRabbit())" Color="@Color.Accent" />
+        </FluentButton>
+        <FluentButton Appearance="Appearance.Neutral" IconStart="@(new Icons.Regular.Size16.AnimalTurtle())">
+            Button
+        </FluentButton>
+        <FluentButton Appearance="Appearance.Accent" IconEnd="@(new Icons.Regular.Size16.AnimalTurtle())">
+            Button
+        </FluentButton>
+
+        <h5>Loading</h5>
+        <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="10">
+            <FluentButton Appearance="Appearance.Neutral" IconStart="@(new Icons.Regular.Size16.ArrowClockwise())" Loading="@loading" OnClick="@StartLoadingAsync">
+                Button
+            </FluentButton>
+            <FluentButton Appearance="Appearance.Accent" IconStart="@(new Icons.Regular.Size16.ArrowClockwise())" Loading="@loading" OnClick="@StartLoadingAsync">
+                Button
+            </FluentButton>
+        </FluentStack>
+    </FluentStack>
+</FluentCard>
+
+@code {
+    bool loading = false;
+
+    async Task StartLoadingAsync()
+    {
+        loading = true;
+        await Task.Delay(2000);
+        loading = false;
+    }
+}