appearance.md

title	page_title	description	slug	tags	published	position
Appearance	ToggleButton Appearance	Appearance settings of the ToggleButton for Blazor.	togglebutton-appearance	telerik,blazor,button,toggle,togglebutton,appearance	true	35

Appearance Settings

You can control the appearance of the toggle button by setting the following attributes:

• FillMode
• Rounded
• Size
• 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 toggles the background and border of the TelerikToggleButton. You can set the parameter 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
Clear	clear

caption 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;">
            <TelerikToggleButton FillMode="@fillmode">@fillmode</TelerikToggleButton>
        </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

@* 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;">
            <TelerikToggleButton Rounded="@rounded">@rounded</TelerikToggleButton>
        </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

@{
    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;">
            <TelerikToggleButton Size="@size">@size</TelerikToggleButton>
        </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

caption 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>
    }
}

@template