# Rendering Changes in 13.0.0

> Make sure that you are using a [compatible Telerik CSS theme](https://www.telerik.com/blazor-ui/documentation/styling-and-themes/overview#compatibility-and-maintenance) every time you [upgrade Telerik UI for Blazor](https://www.telerik.com/blazor-ui/documentation/upgrade/overview).

## 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](https://www.telerik.com/blazor-ui/documentation/upgrade/breaking-changes/13-0-0#components-that-use-appearance-parameters).

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

> 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.skip-repl
<TelerikButton>Click Me</TelerikButton>
```

... produces the following HTML output:

<table>
<thead><tr>
<th>UI for Blazor 12.3.0</th>
<th>UI for Blazor 13.0.0</th>
</tr></thead>
<tbody>
<tr>
<td style="vertical-align:top;">

```HTML.skip-repl
<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>
```

</td>
<td style="vertical-align:top;">

```HTML.skip-repl
<button class="k-button">




    <span class="k-button-text">Click Me</span>
</button>
```

</td>
</tr>
</tbody>
</table>

### TextBox Example

The following Telerik TextBox configuration...

```RAZOR.skip-repl
<TelerikTextBox />
```

... produces the following HTML output:

<table>
<thead><tr>
<th>UI for Blazor 12.3.0</th>
<th>UI for Blazor 13.0.0</th>
</tr></thead>
<tbody>
<tr>
<td style="vertical-align:top;">

```HTML.skip-repl
<span class="k-input
             k-input-md
             k-input-solid
             k-rounded-md
             k-textbox">
    <input class="k-input-inner" />
</span>
```

</td>
<td style="vertical-align:top;">

```HTML.skip-repl
<span class="k-input



             k-textbox">
    <input class="k-input-inner" />
</span>
```

</td>
</tr>
</tbody>
</table>

### DropDownList Example

The following Telerik DropDownList configuration...

```RAZOR.skip-repl
<TelerikDropDownList Data="@DropDownListData"
                     @bind-Value="@DropDownListValue" />
```

... produces the following HTML output:

<table>
<thead><tr>
<th>UI for Blazor 12.3.0</th>
<th>UI for Blazor 13.0.0</th>
</tr></thead>
<tbody>
<tr>
<td style="vertical-align:top;">

```HTML.skip-repl
<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>
```

</td>
<td style="vertical-align:top;">

```HTML.skip-repl
<span class="k-dropdownlist
             k-picker">



    <span class="k-input-inner">
        ...
    </span>
    <button class="k-button



                   k-icon-button 
                   k-input-button">
        ...
    </button>
</span>
```

</td>
</tr>
</tbody>
</table>

### Grid Example

The following Telerik Grid configuration...

```RAZOR.skip-repl
<TelerikGrid Data="@GridData" />
```

... produces the following HTML output:

<table>
<thead><tr>
<th>UI for Blazor 12.3.0</th>
<th>UI for Blazor 13.0.0</th>
</tr></thead>
<tbody>
<tr>
<td style="vertical-align:top;">

```HTML.skip-repl
<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>
```

</td>
<td style="vertical-align:top;">

```HTML.skip-repl
<div class="k-grid">

    ...
    <table class="k-grid-header-table
                  k-table">

        ...
    </table>
    ...
    <table class="k-grid-table
                  k-table">

        ...
    </table>
    ...
</div>
```

</td>
</tr>
</tbody>
</table>

### 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:

```RAZOR
<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](https://www.telerik.com/blazor-ui/documentation/common-features/icons#icons-list) 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.

<table>
<thead><tr>
<th>UI for Blazor 12.3.0</th>
<th>UI for Blazor 13.0.0</th>
</tr></thead>
<tbody>
<tr>
<td style="vertical-align:top;">

```HTML.skip-repl
<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>
```

</td>
<td style="vertical-align:top;">

```HTML.skip-repl
<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>
```

</td>
</tr>
</tbody>
</table>

## See Also

* [Use best practices when overriding theme styles](https://www.telerik.com/blazor-ui/documentation/styling-and-themes/override-theme-styles#best-practices)
* [Breaking changes in Telerik UI for Blazor 13.0.0](https://www.telerik.com/blazor-ui/documentation/upgrade/breaking-changes/13-0-0)