New to Telerik UI for Blazor? Download free 30-day trial

Appearance Settings

This article outlines the available ToolBar parameters, which control its appearance.

Size

You can increase or decrease the size of the ToolBar by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.ToolBar.Size class:

Class members Manual declarations
Small sm
Medium
default value
md
Large lg

The built-in sizes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.ToolBar.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;">
            <TelerikToolBar Size="@size">
                <ToolBarButton Icon="@SvgIcon.Cut">Cut</ToolBarButton>
                <ToolBarButton Icon="@SvgIcon.Copy">Copy</ToolBarButton>
                <ToolBarButton Icon="@SvgIcon.Clipboard">Paste</ToolBarButton>
            </TelerikToolBar>
        </div>
    }
}

See Also

In this article