From 992a77b543606a3986d14fe1e5a665b53450e704 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 30 Sep 2025 15:41:25 +0300
Subject: [PATCH 1/2] docs(Button): Revamp Appearance article
---
components/button/appearance.md | 174 ++++++++++++--------------------
1 file changed, 67 insertions(+), 107 deletions(-)
diff --git a/components/button/appearance.md b/components/button/appearance.md
index 3cec5d9c23..9fb5d9546c 100644
--- a/components/button/appearance.md
+++ b/components/button/appearance.md
@@ -10,151 +10,111 @@ position: 35
# Appearance Settings
-You can control the appearance of the button by setting the following attributes:
+The Telerik Button component for Blazor provides several ways to control its appearance. This article discusses the following component parameters:
* [FillMode](#fillmode)
* [Rounded](#rounded)
* [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.
+You can use all of them together to achieve the desired appearance.
## FillMode
-The `FillMode` toggles the background and border of the TelerikButton. You can set the parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
+The `FillMode` parameter changes or removes the background and border of the Button. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.FillMode`. When setting the `FillMode` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
-| Class members | Manual declarations |
-|------------|--------|
-|`Solid`
default value|`solid`|
-|`Flat`|`flat`|
-|`Outline`|`outline`|
-|`Link`|`link`|
-|`Clear`|`clear`|
+| FillMode Class Member | Actual String Value |
+| --- | --- |
+| `Solid` | `solid` (default) |
+| `Flat` | `flat` |
+| `Outline` | `outline` |
+| `Link` | `link` |
+| `Clear` | `clear` |
->caption The built-in Fill modes
+>caption Built-in Button FillMode Values
````RAZOR
-@* 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();
-
-
- @fillmode
-
- }
-}
+Clear
+Flat
+Link
+Outline
+Solid (Default)
````
## 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:
+The `Rounded` parameter applies a `border-radius` CSS style to the Button to curve the corners. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.Rounded`. When setting the `Rounded` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
-| Class members | Manual declarations |
-|------------|--------|
-|`Small` |`sm`|
-|`Medium`|`md`|
-|`Large`|`lg`|
-|`Full`|`full`|
+| Rounded Class Member | Actual Value |
+| --- | --- |
+| `Small` | `sm` |
+| `Medium` | `md` (default) |
+| `Large` | `lg` |
+| `Full` | `full` |
->caption The built-in values of the Rounded attribute
+>caption Built-in Button Rounded Values
````RAZOR
-@* 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();
-
-
- @rounded
-
- }
-}
+Full
+Large
+Medium (Default)
+Small
````
## 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:
+The `Size` parameter affects the Button dimensions, paddings, and font size. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.Size`. When setting the `Size` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
-| Class members | Manual declarations |
-|---------------|--------|
-| `Small` |`sm`|
-| `Medium` |`md`|
-| `Large` |`lg`|
+| Size Class Member | Actual Value |
+| --- | --- |
+| `Small` | `sm` |
+| `Medium` | `md` (default) |
+| `Large` | `lg` |
->caption The built-in button sizes
+>caption Built-in Button Size Values
````RAZOR
-@{
- 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();
-
-
- @size
-
- }
-}
+Large
+Medium (Default)
+Small
````
## 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:
+The `ThemeColor` parameter controls the Button background, text, and border color. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.ThemeColor`. When setting the `ThemeColor` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
-| Class members | Manual declarations |
-|------------|--------|
-|`Base`
default value |`base`|
-|`Primary`|`primary`|
-|`Secondary`|`secondary`|
-|`Tertiary`|`tertiary`|
-|`Info`|`info`|
-|`Success`|`success`|
-|`Warning`|`warning`|
-|`Error`|`error`|
-|`Dark`|`dark`|
-|`Light`|`light`|
-|`Inverse`|`inverse`|
+| ThemeColor Class Member | Actual String Value |
+| --- | --- |
+| `Base` | `base` (default) |
+| `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
+>caption Built-in Button ThemeColor Values
````RAZOR
-@* 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();
-
-
- @themeColor
-
- }
-}
+Base (Default)
+
+Primary
+Secondary
+Tertiary
+
+Info
+Success
+Warning
+Error
+
+Dark
+Light
+Inverse
````
@[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)
From 8a3a7d333b8878589c6b01b3b8372779992267e3 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Wed, 1 Oct 2025 15:33:20 +0300
Subject: [PATCH 2/2] Update components/button/appearance.md
---
components/button/appearance.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/button/appearance.md b/components/button/appearance.md
index 9fb5d9546c..c70267fe8c 100644
--- a/components/button/appearance.md
+++ b/components/button/appearance.md
@@ -21,7 +21,7 @@ You can use all of them together to achieve the desired appearance.
## FillMode
-The `FillMode` parameter changes or removes the background and border of the Button. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.FillMode`. When setting the `FillMode` parameter value inline, start with a `@` character, otherwise the predefined string constant cannot be resolved.
+The `FillMode` parameter changes or removes the background and border of the Button. Set the parameter to a member of the static class `Telerik.Blazor.ThemeConstants.Button.FillMode`. When setting the `FillMode` parameter value inline, start with an `@` character, otherwise the predefined string constant cannot be resolved.
| FillMode Class Member | Actual String Value |
| --- | --- |