Appearance Settings
You can control the appearance of the button by setting the following attributes:
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 default value |
solid |
Flat |
flat |
Outline |
outline |
Link |
link |
The built-in Fill modes
@* 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 |
The built-in values of the Rounded attribute
@* 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
|
The width and height of the geometric shapes depend on the amount of text in the button, and the size of the font.
The built-in button shapes
@{
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 |
The built-in button sizes
@{
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 default value |
base |
Primary |
primary |
Secondary |
secondary |
Tertiary |
tertiary |
Info |
info |
Success |
success |
Warning |
warning |
Error |
error |
Dark |
dark |
Light |
light |
Inverse |
inverse |
The built-in ThemeColors
@* 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>
}
}