Rendering Changes in 13.0.0

Updated on Mar 20, 2026

Make sure that you are using a compatible Telerik CSS theme every time you upgrade Telerik UI for Blazor.

Apperance Classes

Starting from version 13.0.0, the Telerik Blazor components render appearance-related CSS classes only if the respective parameters are set explicitly. The following table lists the appearance parameters and the associated CSS classes. It uses a few specific components as an example, but the same idea applies to all components that use apperance parameters.

Parameter Name	CSS Classes
FillMode	Classes that end with -solid, -flat, -outline, -link, and -clear, for example: k-button-solid k-chip-outline k-input-flat k-button-link k-button-clear
Rounded	Classes that start with k-rounded-, for example: k-rounded-sm k-rounded-md k-rounded-lg k-rounded-full k-rounded-none
Size	Classes that end with -xs, -sm, -md, -lg, -xl, -xxl, and -xxxl, for example: k-button-md k-icon-xl k-input-lg k-picker-md k-form-sm k-grid-md
ThemeColor	Classes like k-[component]-[themecolor], for example: k-appbar-primary k-badge-primary k-loader-primary

Some components like the Badge, Button, and Chip include their FillMode setting in their ThemeColor class, for example, k-badge-solid-primary, k-button-solid-base, or k-chip-solid-info.

Button Example

The following Telerik Button configuration...

RAZOR

<TelerikButton>Click Me</TelerikButton>

... produces the following HTML output:

UI for Blazor 12.3.0	UI for Blazor 13.0.0
HTML <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> <span class="k-button-text">Click Me</span> </button>	HTML <button class="k-button"> <span class="k-button-text">Click Me</span> </button>

TextBox Example

The following Telerik TextBox configuration...

RAZOR

<TelerikTextBox />

... produces the following HTML output:

UI for Blazor 12.3.0	UI for Blazor 13.0.0
HTML <span class="k-input k-input-md k-input-solid k-rounded-md k-textbox"> <input class="k-input-inner" /> </span>	HTML <span class="k-input k-textbox"> <input class="k-input-inner" /> </span>

DropDownList Example

The following Telerik DropDownList configuration...

RAZOR

<TelerikDropDownList Data="@DropDownListData"
                     @bind-Value="@DropDownListValue" />

... produces the following HTML output:

UI for Blazor 12.3.0	UI for Blazor 13.0.0
HTML <span class="k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md"> <span class="k-input-inner"> ... </span> <button class="k-button k-button-md k-button-solid k-button-solid-base k-icon-button k-input-button"> ... </button> </span>	HTML <span class="k-dropdownlist k-picker"> <span class="k-input-inner"> ... </span> <button class="k-button k-icon-button k-input-button"> ... </button> </span>

Grid Example

The following Telerik Grid configuration...

RAZOR

<TelerikGrid Data="@GridData" />

... produces the following HTML output:

UI for Blazor 12.3.0	UI for Blazor 13.0.0
HTML <div class="k-grid k-grid-md"> ... <table class="k-grid-header-table k-table k-table-md"> ... </table> ... <table class="k-grid-table k-table k-table-md"> ... </table> ... </div>	HTML <div class="k-grid"> ... <table class="k-grid-header-table k-table"> ... </table> ... <table class="k-grid-table k-table"> ... </table> ... </div>

Restore Old Rendering

Restoring the old rendering in version 13.0.0 is normally not necessary. In specific cases, you can set the appearance parameters explicitly to their previous default values, for example:

<TelerikButton FillMode="@ThemeConstants.Button.FillMode.Solid"
               Rounded="@ThemeConstants.Button.Rounded.Medium"
               Size="@ThemeConstants.Button.Size.Medium"
               ThemeColor="@ThemeConstants.Button.ThemeColor.Base">
    Click Me
</TelerikButton>

In the above snippet:

• The Solid FillMode renders a class k-button-solid.
• The Medium Rounded renders a class k-rounded-md.
• The Medium Size renders a class k-button-md.
• The Base ThemeColor renders a class k-button-base. Note that this class differs in version 12.3.0 where it used to be k-button-solid-base.

Chat

• The AppBar component in the Chat header is replaced by a ToolBar component. The k-chat-header class is preserved.
• The TextArea component is replaced by a PromptBox component.
• The k-chat-file-wrapper CSS class is renamed to k-file-box-wrapper.
• The k-chat-file class is renamed to k-file-box.
• The k-chat-file-info class is renamed to k-file-info.
• The k-chat-file-size class is renamed to k-file-size.

TreeView

• The CaretAltRight and CaretAltDown expand/collapse icons are replaced by ChevronRight and ChevronDown.
• The k-treeview-top, k-treeview-mid, and k-treeview-bot classes are no longer used. The same <span> elements use a k-treeview-item-content class instead.
• The k-focus and k-selected classes are rendered on the parent span.k-treeview-item-content instead.

UI for Blazor 12.3.0	UI for Blazor 13.0.0
HTML <li class="k-treeview-item"> <span class="k-treeview-mid"> <span class="k-treeview-leaf k-focus k-selected"> <span class="k-treeview-leaf-text">Item Text</span> </span> </span> </li>	HTML <li class="k-treeview-item"> <span class="k-treeview-item-content k-focus k-selected"> <span class="k-treeview-leaf"> <span class="k-treeview-leaf-text">Item Text</span> </span> </span> </li>

See Also

• Use best practices when overriding theme styles
• Breaking changes in Telerik UI for Blazor 13.0.0