Documentation of component options

components/button/appearance.md

@@ -0,0 +1,192 @@
+---
+title: Appearance
+page_title: Button Appearance
+description: Appearance settings of the Button for Blazor.
+slug: button-appearance
+tags: telerik,blazor,button,appearance
+published: True
+position: 35
+---
+
+# Appearance Settings
+
+You can control the appearance of the button by setting the following attributes:
+
+* [FillMode](#fillmode)
+* [Rounded](#rounded)
+* [Shape](#shape)
+* [Size](#size)
+* [ThemeColor](#themecolor)
+
+You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
+
+## FillMode
+
+The `FillMode` controls how the TelerikButton is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Solid` <br /> default value|`solid`|
+|`Flat`|`flat`|
+|`Outline`|`outline`|
+|`Link`|`link`|
+
+>caption The built-in Fill modes
+
+````CSHTML
+@* These are all built-in fill modes *@
+
+@{ 
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.FillMode)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string fillmode = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton FillMode="@fillmode">@fillmode</TelerikButton>
+        </div>
+    }
+}
+````
+
+## Rounded
+
+The `Rounded` parameter applies the `border-radius` CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Small` |`sm`|
+|`Medium`|`md`|
+|`Large`|`lg`|
+|`Full`|`full`|
+
+>caption The built-in values of the Rounded attribute
+
+````CSHTML
+@* The built-in rounded edges of the button.  *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Rounded)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string rounded = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Rounded="@rounded">@rounded</TelerikButton>
+        </div>
+    }
+}
+````
+
+## Shape
+
+The `Shape` attribute defines the geometric shape of the button. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Shape` class:
+
+| Class members | Manual declarations |
+|---------------|--------|
+| `Rectangle`   |`rectangle`|
+| `Square`   |`square`|
+| `Circle`   |To create a circular button you should set the `Shape` attribute to **Square**, and the `Rounded` attribute to **Full**|
+
+
+>note The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font.
+
+>caption The built-in button shapes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Shape)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string shape = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Shape="@shape">@shape</TelerikButton>
+        </div>
+    }
+}
+````
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
+
+| Class members | Manual declarations |
+|---------------|--------|
+| `Small`   |`sm`|
+| `Medium`   |`md`|
+| `Large`   |`lg`|
+
+>caption The built-in button sizes
+
+````CSHTML
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.Size)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string size = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikButton Size="@size">@size</TelerikButton>
+        </div>
+    }
+}
+````
+
+## ThemeColor
+
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
+
+| Class members | Manual declarations |
+|------------|--------|
+|`Base` <br /> default value |`base`|
+|`Primary`|`primary`|
+|`Secondary`|`secondary`|
+|`Tertiary`|`tertiary`|
+|`Info`|`info`|
+|`Success`|`success`|
+|`Warning`|`warning`|
+|`Error`|`error`|
+|`Dark`|`dark`|
+|`Light`|`light`|
+|`Inverse`|`inverse`|
+
+
+>caption The built-in ThemeColors
+
+````CSHTML
+@* The built-in button colors *@
+
+@{
+    var fields = typeof(Telerik.Blazor.ThemeConstants.Button.ThemeColor)
+        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
+        | System.Reflection.BindingFlags.FlattenHierarchy)
+        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
+
+    foreach (var field in fields)
+    {
+        string themeColor = field.GetValue(null).ToString();
+
+        <div style="float:left; margin: 20px;">
+            <TelerikToggleButton ThemeColor="@themeColor">@themeColor</TelerikToggleButton>
+        </div>
+    }
+}
+````
+

components/button/overview.md

@@ -87,6 +87,10 @@ Add a reference to the Button instance to use its methods (for example - `FocusA
 
 * [Using Button Icons]({%slug button-icons%})
 
+>caption The result from the code snippet above
+
+![use css to change the button size](images/button-size-change.png)
+
 ## See Also
 
   * [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index)

components/button/styling.md

@@ -18,13 +18,7 @@ There are a few ways to style the Button component:
 
 ## Primary Button
 
-Through the primary button styling, you can make the button use a strong color to attract attention. To do that, set its `Primary` property to true.
-
->caption Button with the Primary color scheme from the current theme
-
-````CSHTML
-<TelerikButton Primary="true">Primary</TelerikButton>
-````
+To set a Primary button you should set the `ThemeColor` parameter to `primary`. [Read the Appearance article for further information...]({%slug button-appearance%}).
 
 ## Button Class