Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 67 additions & 107 deletions components/button/appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 an `@` character, otherwise the predefined string constant cannot be resolved.

| Class members | Manual declarations |
|------------|--------|
|`Solid` <br /> 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();

<div style="float:left; margin: 20px;">
<TelerikButton FillMode="@fillmode">@fillmode</TelerikButton>
</div>
}
}
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Clear">Clear</TelerikButton>
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Flat">Flat</TelerikButton>
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Link">Link</TelerikButton>
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Outline">Outline</TelerikButton>
<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Solid">Solid (Default)</TelerikButton>
````

## 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();

<div style="float:left; margin: 20px;">
<TelerikButton Rounded="@rounded">@rounded</TelerikButton>
</div>
}
}
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Full">Full</TelerikButton>
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Large">Large</TelerikButton>
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Medium">Medium (Default)</TelerikButton>
<TelerikButton Rounded="@ThemeConstants.Button.Rounded.Small">Small</TelerikButton>
````

## 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();

<div style="float:left; margin: 20px;">
<TelerikButton Size="@size">@size</TelerikButton>
</div>
}
}
<TelerikButton Size="@ThemeConstants.Button.Size.Large">Large</TelerikButton>
<TelerikButton Size="@ThemeConstants.Button.Size.Medium">Medium (Default)</TelerikButton>
<TelerikButton Size="@ThemeConstants.Button.Size.Small">Small</TelerikButton>
````

## 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` <br /> 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();

<div style="float:left; margin: 20px;">
<TelerikToggleButton ThemeColor="@themeColor">@themeColor</TelerikToggleButton>
</div>
}
}
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Base">Base (Default)</TelerikButton>

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Primary</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary">Secondary</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Tertiary">Tertiary</TelerikButton>

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Info">Info</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success">Success</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Warning">Warning</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Error">Error</TelerikButton>

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Dark">Dark</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Light">Light</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Inverse">Inverse</TelerikButton>
````

@[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)