Separating Button and GlyphButton

src/Connected.Components/Components/Button.razor

@@ -1,44 +1,9 @@
 <button type="button"
-        href="#"
         @onclick="@OnClick"
         disabled=@Disabled
         style="@StyleList"
         class="@ClassList">
     <div class="@ContentClassList">
-        @if (!string.IsNullOrEmpty(Glyph))
-        {
-            @if (GlyphPosition == Position.Top || GlyphPosition == Position.Bottom)
-            {
-                <div style="align-items:center">
-                    @if (GlyphPosition == Position.Top)
-                    {
-                        <Glyph SVG="@Glyph" Color="@GlyphColor" />
-                    }
-                    @ChildContent
-                    @if (GlyphPosition == Position.Bottom)
-                    {
-                        <Glyph SVG="@Glyph" Color="@GlyphColor" />
-                    }
-                </div>
-            }
-            @if (GlyphPosition == Position.Left || GlyphPosition == Position.Right)
-            {
-                <div style="display:flex; align-items:center">
-                    @if (GlyphPosition == Position.Left)
-                    {
-                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
-                    }
-                    @ChildContent
-                    @if (GlyphPosition == Position.Right)
-                    {
-                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
-                    }
-                </div>
-            }
-        }
-        else
-        {
             @ChildContent
-        }
     </div>
 </button>

src/Connected.Components/Components/Button.razor.cs

@@ -26,10 +26,10 @@ public partial class Button
 	/// <summary>
 	/// Size of the button.
 	/// Options: Size.[Small,Medium,Large,FullWidth]
-	/// Default: Size.Large
+	/// Default: Size.Medium
 	/// </summary>
 	[Parameter]
-	public Size Size { get; set; } = Size.Large;
+	public Size Size { get; set; } = Size.Medium;
 
 	/// <summary>
 	/// Text shown inside the button
@@ -46,29 +46,6 @@ public partial class Button
 	[Parameter]
 	public bool Disabled { get; set; } = false;
 
-	/// <summary>
-	/// Glyph (Icon) inside the button.
-	/// Options: SVG string --> Icons
-	/// Default: string.Empty
-	/// </summary>
-	[Parameter]
-	public string Glyph { get; set; } = string.Empty;
-
-	/// <summary>
-	/// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored
-	/// Options: Position.[left,top,right,bottom]
-	/// Default: Position.left 
-	/// </summary>
-	[Parameter]
-	public Position GlyphPosition { get; set; } = Position.Left;
-
-	/// <summary>
-	/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
-	/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
-	/// Default: Color.Dark
-	/// </summary>
-	[Parameter]
-	public Color GlyphColor { get; set; } = Color.Dark;
 
 	/// <summary>
 	/// User defined custom class added on top of default generated classes
@@ -113,7 +90,7 @@ public partial class Button
 
 	#region Styling
 
-	private string StyleList
+	public string StyleList
 	{
 		get
 		{
@@ -127,7 +104,7 @@ public partial class Button
 	/// <summary>
 	/// Generated class list for button based on user parameters
 	/// </summary>
-	private string ClassList
+	public string ClassList
 	{
 		get
 		{
@@ -143,7 +120,7 @@ public partial class Button
 	/// <summary>
 	/// Generated class list for button based on user parameters
 	/// </summary>
-	private string ContentClassList
+	public string ContentClassList
 	{
 		get
 		{

src/Connected.Components/Components/GlyphButton.razor

@@ -0,0 +1,46 @@
+@inherits Button
+
+<button type="button"
+        href="#"
+        @onclick="@OnClick"
+        disabled=@Disabled
+        style="@StyleList"
+        class="@ClassList">
+    <div class="@ContentClassList">
+        @if (!string.IsNullOrEmpty(Glyph))
+        {
+            @if (GlyphPosition == Position.Top || GlyphPosition == Position.Bottom)
+            {
+                <div style="align-items:center">
+                    @if (GlyphPosition == Position.Top)
+                    {
+                        <Glyph SVG="@Glyph" Color="@GlyphColor" />
+                    }
+                    @ChildContent
+                    @if (GlyphPosition == Position.Bottom)
+                    {
+                        <Glyph SVG="@Glyph" Color="@GlyphColor" />
+                    }
+                </div>
+            }
+            @if (GlyphPosition == Position.Left || GlyphPosition == Position.Right)
+            {
+                <div style="display:flex; align-items:center">
+                    @if (GlyphPosition == Position.Left)
+                    {
+                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
+                    }
+                    @ChildContent
+                    @if (GlyphPosition == Position.Right)
+                    {
+                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
+                    }
+                </div>
+            }
+        }
+        else
+        {
+            @ChildContent
+        }
+    </div>
+</button>

src/Connected.Components/Components/GlyphButton.razor.cs

@@ -0,0 +1,34 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+public partial class GlyphButton : Button
+{
+	#region Parameters
+
+	/// <summary>
+	/// Glyph (Icon) inside the button.
+	/// Options: SVG string --> Icons
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter, EditorRequired]
+	public string Glyph { get; set; } = string.Empty;
+
+	/// <summary>
+	/// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored
+	/// Options: Position.[left,top,right,bottom]
+	/// Default: Position.left 
+	/// </summary>
+	[Parameter]
+	public Position GlyphPosition { get; set; } = Position.Left;
+
+	/// <summary>
+	/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
+	/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
+	/// Default: Color.Dark
+	/// </summary>
+	[Parameter]
+	public Color GlyphColor { get; set; } = Color.Dark;
+
+	#endregion
+
+}