Rendering Changes in 8.0.0

Updated on Nov 10, 2026

The Kendo UI for Vue 8.0.0 release introduces changes in the rendering of several components. Most of the components no longer apply default values to their appearance properties (size, rounded, fillMode, themeColor, and the related ones), so the classes that these defaults produced are not rendered unless you set the properties explicitly. If your application overrides the built-in CSS rules or queries the generated markup, for example in tests, review the following changes.

To keep the previous look, set the properties explicitly, for example size="medium", rounded="medium", fillMode="solid", and themeColor="base", where the component supports them. For the changes in the API, see Breaking Changes in 8.0.0.

Buttons

• Button, DropDownButton, SplitButton, and SpeechToTextButton—The k-button-md, k-rounded-md, k-button-solid, and k-button-solid-base classes, and the k-icon-md class of the icon, are not rendered unless size, rounded, fillMode, themeColor, or iconSize is set.

• Chip—The k-chip-md, k-rounded-md, k-chip-solid, and k-chip-solid-base classes are not rendered unless the properties are set.

• ChipList—The k-chip-list-md class is not rendered unless size is set, and the ChipList no longer passes the default values to its chips.

• FloatingActionButton—The k-fab-md, k-rounded-full, k-fab-solid, and k-fab-solid-primary classes are not rendered unless the properties are set.

• Toolbar—The k-toolbar-md and k-toolbar-solid classes, and the k-toolbar-items-list-md and k-toolbar-items-list-solid classes in the overflow popup, are not rendered unless size or fillMode is set.

• Button, Chip, and FloatingActionButton—An explicit themeColor renders a single theme color class instead of the combined fillMode and themeColor class.

  • Before: k-button-solid-primary, k-chip-solid-info, and k-fab-solid-primary. The combined classes follow the k-button-<fillMode>-<themeColor>, k-chip-<fillMode>-<themeColor>, and k-fab-<fillMode>-<themeColor> patterns.
  • After: k-button-primary, k-chip-info, and k-fab-primary. The classes follow the k-button-<themeColor>, k-chip-<themeColor>, and k-fab-<themeColor> patterns.

• Button and FloatingActionButton—The k-button-<shape> classes (for example k-button-square) and the k-fab-<shape> classes (k-fab-rectangle, k-fab-square, k-fab-pill, k-fab-circle, and k-fab-rounded) are not rendered, because the shape property is removed. The FloatingActionButton rendered k-fab-rectangle by default.

Data Tools

• Pager—The k-pager-md class is not rendered unless size is set. The same applies to the k-picker-md class of the responsive numeric select.
• Pager—The navigation and numeric buttons do not render k-button-md, and the page size DropDownList does not render k-picker-md, k-picker-solid, and k-rounded-md, unless size is set explicitly on the Pager.
• FilterCell—The child controls (buttons, dropdowns, and inputs) no longer receive a default size.

Date Inputs

• DateInput, DatePicker, DateTimePicker, and TimePicker—The k-input-md, k-input-solid, and k-rounded-md classes are not rendered unless size, rounded, or fillMode is set.
• DateRangePicker—The swap button does not render k-button-md and k-rounded-md unless size or rounded is set.

Dropdowns

• AutoComplete, ComboBox, MultiSelect, and MultiSelectTree—The k-input-md, k-rounded-md, and k-input-solid classes are not rendered unless size, rounded, or fillMode is set.
• DropDownList and DropDownTree—The k-picker-md, k-rounded-md, and k-picker-solid classes are not rendered unless the properties are set.
• MultiSelect and MultiSelectTree—The tag list does not render k-chip-list-md, and each tag does not render k-chip-md, k-rounded-md, k-chip-solid, and k-chip-solid-base, unless size, rounded, fillMode, or tagsRounded (MultiSelect) is set.
• The list filter input does not render k-input-md, k-rounded-md, and k-input-solid unless the properties are set.

Grid

• Grid—The GridToolbar renders k-toolbar k-grid-toolbar k-toolbar-solid. The k-toolbar-md class is rendered only when size="medium" is set. The Grid itself still renders k-grid-md and k-table-md, because its size default is not removed.

• Grid—The inline scrollbar-compensation padding (style="padding: 0 <scrollbar width>px 0 0", mirrored in RTL) is no longer set on the k-grid-header and k-grid-footer elements.

• Grid—The header th elements no longer have style="top: 0px".

• Grid—The header td cells, for example the filter row cells, now render the id, colspan, and rowspan attributes.

• GridFilterCell—The k-filtercell-operator wrapper now contains an   before the clear button.

• Grid—The k-selected class of a row follows the isSelected state that the Grid computes instead of the value of selectedField on the data item.

• Grid—Each row tr renders an absolute-row-index attribute.

• Grid—The no-records message moved.

  • Before: A tr.k-table-row.k-grid-norecords with a td.k-table-td inside the tbody.
  • After: A div.k-grid-norecords with a div.k-grid-norecords-template, a sibling of the table. In a scrollable Grid, it is inside the k-grid-table-wrap element. The k-height-container element is not rendered while there are no records.

• Grid—The default loader markup changed.

  • Before: A div.k-loader-container.k-loader-container-md.k-loader-top with k-loader-container-overlay and k-loader-container-inner children and an infinite-spinner Loader, inside the k-grid-container element.
  • After: A div.k-loading-mask with a k-loading-color child and a centered converging-spinner Loader. It is rendered only when showLoader is true, and it is a child of the Grid root after the pager instead of being inside k-grid-container.

Indicators

• Badge—The k-badge-md, k-badge-solid, k-badge-solid-primary, and k-rounded-md classes are not rendered unless size, rounded, fillMode, or themeColor is set. An explicit themeColor renders a single k-badge-<themeColor> class, for example k-badge-primary, instead of the combined k-badge-<fillMode>-<themeColor> class.
• BadgeContainer—The badge element does not render k-badge-md, k-badge-solid, and k-rounded-md unless the properties are set. The combined k-badge-<fillMode>-<themeColor> class is rendered only when fillMode is set.
• Loader—The k-loader-md class is not rendered unless size is set. The k-loader-primary class is still rendered, because the themeColor default is not removed.

Inputs

• Input, TextBox, TextArea, MaskedTextBox, and NumericTextBox—The k-input-md, k-rounded-md, and k-input-solid classes are not rendered unless size, rounded, or fillMode is set.
• ColorPicker—The k-picker-md, k-rounded-md, and k-picker-solid classes are not rendered unless the properties are set.
• Signature—The k-signature-md, k-rounded-md, and k-input-solid classes are not rendered unless the properties are set.
• Checkbox—The k-checkbox-md and k-rounded-md classes are not rendered unless size or rounded is set.
• RadioButton—The k-radio-md class is not rendered unless size is set.
• Switch—The k-switch-md class and the k-rounded-full class of the root, the track, and the thumb are not rendered unless size, trackRounded, or thumbRounded is set. The 'circle' option of trackRounded and thumbRounded is removed. Use 'full' instead.
• ColorPalette—The k-colorpalette-md class is not rendered unless size is set.
• FlatColorPicker—The k-coloreditor-md class is not rendered unless size is set. The FlatColorPicker and the ColorPicker popup no longer pass a default size to the ColorGradient (k-colorgradient-md) and the ColorPalette.

Layout

• Avatar—The k-avatar-md, k-rounded-md, k-avatar-solid, and k-avatar-solid-primary classes are not rendered unless size, rounded, or fillMode is set. The k-avatar-solid-primary class is rendered only together with fillMode="solid".
• TabStrip—The k-tabstrip-md class is not rendered unless size is set.

ListBox

• ListBox—The k-list-md class of the k-list element is not rendered unless size is set.

  • Before: <ListBox /> rendered k-list k-list-md.
  • After: <ListBox /> renders k-list.

• ListBoxToolbar—The tool buttons no longer receive the default appearance classes of the buttons package, such as k-button-md, k-rounded-md, and k-button-solid, because the Button defaults are removed.

TreeList

• TreeList—The size classes of the table, the header table, the toolbar, and the Pager changed when size is not set.

  • Before: k-table k-grid-table k-table-md on the data table, k-table-md on the header table (k-grid-header-table), k-toolbar-md on the toolbar, and k-pager-md on the Pager.
  • After: The data table renders k-table k-grid-table k-grid-md, and the header table, the toolbar, and the Pager have no size class. The wrapper keeps k-grid k-grid-md. Set size="medium" to restore the previous classes. The FilterCell and Pager child controls (buttons, dropdowns, and inputs) no longer receive a default size.

• TreeList—The 'none' size renders k-grid-none, k-table-none, and the like.

For the changes in the component API, see Breaking Changes in 8.0.0.