Breaking Changes in 8.0.0

Updated on Nov 10, 2026

The Kendo UI for Vue 8.0.0 release removes the default values of the appearance properties (size, rounded, fillMode, themeColor, and the related ones) of many components, narrows the types of these properties, removes the shape property of the buttons, and changes the Grid loader, the Grid row properties, and the Grid template ref. Stale values are not always reported at runtime, and TypeScript flags them only where the type was narrowed, so review your code rather than rely on compilation errors.

The components no longer render the classes that the removed defaults produced, unless you set the properties explicitly. To keep the previous look, set the properties explicitly, for example size="medium", rounded="medium", fillMode="solid", and themeColor="base", where the component supported them. For the removed and renamed classes, see Rendering Changes in 8.0.0.

For most of the properties below, the types become strict unions. They no longer accept null and arbitrary strings, and 'none' is a valid rounded value. The sections below list the exceptions. Omitting a property is equivalent to the previous null, so use undefined or omit the property instead of passing null.

Buttons

• Button, Chip, ChipList, DropDownButton, FloatingActionButton, SplitButton, SpeechToTextButton, and Toolbar—The size, rounded, fillMode, and themeColor properties no longer have default values. The iconSize property of the Button and the SpeechToTextButton has no default value either.

  • Before: <Button /> rendered the classes of the 'medium' size, the 'medium' rounded corners, the 'solid' fill mode, and the 'base' theme color. The same applied to the other components with their own defaults.
  • After: A class is rendered only for the properties that you set. The ChipList has no defaults for size, rounded, and fillMode, and the Toolbar has no defaults for size and fillMode. Neither of them has a themeColor property. The ChipList no longer passes default values to its chips.
  • To migrate, set size, rounded, fillMode, and themeColor explicitly wherever you need the previous appearance, replace null with undefined or omit the property, and update the CSS and tests that depend on the removed classes. The buttons-appearance-null-props codemod removes the literal null values automatically. Review the values that evaluate to null at runtime, such as :size="compact ? 'small' : null", the properties passed through v-bind="obj" or JSX spreads, and the wrapper components that forward these properties, together with the types of those wrappers.

• Button, DropDownButton, FloatingActionButton, and SplitButton—The shape property is removed, and the FloatingActionButtonShape type is no longer exported.

  • Before: <Button shape="square" />, <FloatingActionButton :shape="'pill'" />, or <DropDownButton shape="rectangle" /> rendered the k-button-<shape> class (except for 'rectangle') or the k-fab-<shape> class. The FloatingActionButton rendered k-fab-rectangle by default and supported 'square', 'pill', 'circle', and 'rounded'.
  • After: The property does not exist, and the k-button-<shape> and k-fab-<shape> classes are not rendered.
  • To migrate, remove the shape property and the FloatingActionButtonShape type, and use the rounded property for the corner shape: 'none' for a rectangle or square look, 'medium' for the default rounded corners, and 'full' for a pill or circle look. There is no one-to-one replacement. Update the custom CSS, tests, and wrapper components that depend on the removed classes or on the type. The button-shape-removed codemod flags the affected files.

Data Tools

• Pager and FilterCell—The size property of the Pager no longer has a default value ('medium'). The Pager passes its size to the navigation buttons, the numeric buttons, the responsive page select, and the page size DropDownList, and the FilterCell passes its size to its child controls. These controls no longer receive a default size, and the default appearance classes of the buttons and dropdowns are not rendered either.

  • Before: <Pager :size="null" /> rendered no size classes, while an omitted size rendered the default k-pager-md class. The FilterCell size type accepted null and arbitrary strings.
  • After: The size type of the Pager and the FilterCell no longer accepts arbitrary strings, and the FilterCell no longer accepts null.
  • To migrate, set size="medium" explicitly where you need the previous appearance, replace null with undefined or omit the property, and update the CSS and tests that depend on the removed classes. The datatools-appearance-null-props codemod removes the literal null values of the Pager size automatically.

Date Inputs

• DateInput, DatePicker, DateRangePicker, DateTimePicker, and TimePicker—The size, rounded, and fillMode properties no longer have default values ('medium', 'medium', and 'solid').

  • Before: The components rendered k-input-md k-input-solid k-rounded-md when the properties were not set. The swap button of the DateRangePicker rendered k-button-md and k-rounded-md.
  • After: The classes are not rendered unless you set the properties. The rounded validator now also accepts 'none', and the size type of DateInputSettings, DatePickerSettings, DateRangePickerSettings, DateTimePickerSettings, and TimePickerSettings no longer accepts arbitrary strings.
  • To migrate, set size="medium", rounded="medium", and fillMode="solid" explicitly where you need the previous appearance, replace null with undefined or omit the properties, and update the CSS and tests that depend on the removed classes. The dateinputs-appearance-null-props codemod removes the literal null values automatically. Review the size, rounded, and fillMode values that you set in the *Settings objects.

Dropdowns

• AutoComplete, ComboBox, DropDownList, DropDownTree, MultiSelect, and MultiSelectTree—The size, rounded, and fillMode properties no longer have default values ('medium', 'medium', and 'solid'). The tagsRounded property of the MultiSelect has no default value ('medium') either.

  • Before: The AutoComplete, ComboBox, MultiSelect, and MultiSelectTree rendered k-input-md k-rounded-md k-input-solid, and the DropDownList and DropDownTree rendered k-picker-md k-rounded-md k-picker-solid.
  • After: The classes are not rendered unless you set the properties. The properties are strict unions, and 'none' is a valid rounded and tagsRounded value. The tags of the MultiSelect and the MultiSelectTree are Chip components, which no longer apply their own default fill mode and theme color either.
  • To migrate, set size="medium", rounded="medium", and fillMode="solid" explicitly where you need the previous appearance, replace null with undefined or omit the properties, and update the CSS and tests that depend on the removed classes. The dropdowns-appearance-null-props codemod removes the literal null values automatically.

Grid

• Grid—The boolean form of the loader property is removed. The new showLoader property controls whether the loader is displayed, and loader accepts only a custom loader template (a slot name, a render function, or a component).

  • Before: <Grid :loader="isLoading" /> displayed the default loader while isLoading was true, and <Grid :loader="'myLoader'" /> displayed the custom loader whenever the property was set.
  • After: <Grid :show-loader="isLoading" /> displays the default loader, and <Grid :loader="'myLoader'" :show-loader="isLoading" /> displays the custom loader while showLoader is true. A boolean loader value no longer shows the loader.
  • To migrate, rename the boolean loader to showLoader (show-loader in templates). For a custom loader template, keep loader and add showLoader, driven by the state that previously decided whether the loader was shown. If a value can be either a boolean or a template, split it into a showLoader boolean and a loader template. The grid-loader-show-loader codemod renames the literal boolean values (loader, :loader="true", :loader="false", loader={true}, and loader={false}) automatically. The grid-loader-binding codemod flags the dynamic bindings, such as :loader="isLoading" or :loader="isLoading && !error", the properties passed through v-bind="obj" or JSX spreads, and the wrapper components that forward loader, so that you migrate them manually.

• Grid—The row properties that the Grid passes to a custom row render changed. GridRowProps and GridRow no longer declare dataItem. They declare item, the row model of the Grid, which holds the data item in item.dataItem together with the row type, level, expanded state, and index.

  • Before: rowRender: (h, trElement, defaultSlots, props) => ... props.dataItem.ProductName and props: GridRowProps with props.dataItem.
  • After: The same code reads props.item.dataItem.ProductName. The cell properties (GridCellProps) still use dataItem. At runtime, the Grid still adds dataItem (the value of item.dataItem) to the properties of a custom rowRender, but it is no longer part of the typed GridRowProps. The selectedField property is no longer passed to the row. Use isSelected instead.
  • To migrate, read the data item from props.item.dataItem in every rowRender (row-render in templates) function, component, and slot that uses GridRowProps, and update the wrapper components and their TypeScript types. The grid-row-render-item codemod flags the affected files.

• Grid—The template ref of the Grid exposes only the members of GridHandle: element, props, columns, scrollIntoView, fitColumns, and exportAsPdf, plus the standard Vue instance properties such as $el and $props. The Grid is now a wrapper around an inner component.

  • Before: gridRef.value.getColumns() returned the current columns with their widths and any other GridColumnProps. The other methods and data of the Grid instance were reachable through the ref.
  • After: gridRef.value.getColumns is undefined, and the other methods and data of the previous Grid instance are no longer reachable through the ref. The replacement of getColumns() is the columns property (gridRef.value.columns), which is a property, not a function.
  • To migrate, replace the getColumns() calls with the columns property, and check every other member that your code reads from the Grid ref against the list above. The grid-ref-get-columns codemod rewrites the zero-argument getColumns() calls automatically when the ref is statically a Grid ref in the same file: a static ref="grid" on the Grid, a JSX ref, useTemplateRef, ref<InstanceType<typeof Grid>>(), or this.$refs.grid. Migrate manually the template expressions such as @click="gridRef.getColumns()", the aliased or dynamic refs, and the calls on refs that cannot be proven to be Grid refs. The grid-ref-api codemod flags the files with the remaining getColumns() calls.

• GridToolbar—The size property no longer has a default value, and it now also accepts 'none'. The default size of the Grid itself ('medium') is not removed, and the GridFilterCell never applied a default size.

  • Before: <GridToolbar /> rendered the k-toolbar-md class.
  • After: <GridToolbar /> does not render k-toolbar-md.
  • To migrate, set size="medium" explicitly to keep the previous appearance, and update the CSS and tests that depend on the removed class.

Indicators

• Badge—The size, rounded, fillMode, and themeColor properties no longer have default values, and the types no longer accept null and arbitrary strings.

  • Before: <Badge /> rendered k-badge-md k-badge-solid k-badge-solid-primary k-rounded-md.
  • After: The classes are not rendered unless you set the properties. When themeColor is set, the Badge renders a single k-badge-<themeColor> class instead of the combined k-badge-<fillMode>-<themeColor> class.
  • To migrate, set size="medium", rounded="medium", fillMode="solid", and themeColor="primary" explicitly where you need the previous appearance, replace null with undefined or omit the properties, and update the CSS and tests that depend on the removed or renamed classes. The indicators-appearance-null-props codemod removes the literal null values automatically.

• BadgeContainer—The size, rounded, and fillMode properties no longer have default values. The themeColor default ('primary') is not removed.

  • Before: The badge element of the BadgeContainer rendered k-badge-md k-badge-solid k-badge-solid-primary k-rounded-md.
  • After: The combined k-badge-<fillMode>-<themeColor> class is rendered only when fillMode is set. Omitting themeColor still renders the primary color, so themeColor={null} is left unchanged by the codemod.
  • To migrate, set size="medium", rounded="medium", and fillMode="solid" explicitly where you need the previous appearance, and update the CSS and tests that depend on the removed classes.

• Loader—The size property no longer has a default value. The themeColor default ('primary') is not removed.

  • Before: <Loader /> rendered k-loader-md.
  • After: <Loader /> does not render k-loader-md, and still renders k-loader-primary.
  • To migrate, set size="medium" explicitly to keep the previous appearance, and update the CSS and tests that depend on the removed class.

Inputs

• Checkbox, ColorPalette, ColorPicker, FlatColorPicker, Input, MaskedTextBox, NumericTextBox, RadioButton, Signature, Switch, TextArea, and TextBox—The default values of the size, rounded, fillMode, trackRounded, and thumbRounded properties that each component supports are removed. The Checkbox supports size and rounded. The ColorPalette, FlatColorPicker, and RadioButton support size. The ColorPicker, Input, MaskedTextBox, NumericTextBox, Signature, TextArea, and TextBox support size, rounded, and fillMode. The Switch supports size, trackRounded, and thumbRounded.

  • Before: The Input, TextBox, TextArea, MaskedTextBox, and NumericTextBox rendered k-input-md k-rounded-md k-input-solid, the Checkbox rendered k-checkbox-md k-rounded-md, the RadioButton rendered k-radio-md, and the Switch rendered k-switch-md and k-rounded-full.
  • After: The classes are not rendered unless you set the properties. The properties are strict unions, and 'none' is a valid rounded, trackRounded, and thumbRounded value. The ColorGradient never had a default size, but it no longer receives one from the FlatColorPicker and the ColorPicker popup.
  • To migrate, set size="medium", rounded="medium", and fillMode="solid" explicitly where you need the previous appearance, replace null with undefined or omit the properties, and update the CSS and tests that depend on the removed classes. The inputs-appearance-null-props codemod removes the literal null values automatically.

• Switch—The 'circle' option is removed from the trackRounded and thumbRounded types.

  • Before: <Switch trackRounded="circle" thumbRounded="circle" /> was part of the types.
  • After: trackRounded and thumbRounded accept 'none', 'small', 'medium', 'large', and 'full'.
  • To migrate, replace 'circle' with 'full' for a fully rounded track or thumb. The inputs-default-appearance-rendering-changes codemod flags the Switch components that set trackRounded or thumbRounded to 'circle' as string literals. Review the values that come from variables or expressions manually.

Layout

• Avatar—The size, rounded, and fillMode properties no longer have default values. The themeColor default ('primary') is not removed.

  • Before: <Avatar /> rendered k-avatar-md k-rounded-md k-avatar-solid k-avatar-solid-primary.
  • After: The classes are not rendered unless you set the properties, and k-avatar-solid-primary is rendered only together with fillMode="solid". The Avatar property types still accept null, and themeColor={null} is left unchanged by the codemod.
  • To migrate, set size="medium", rounded="medium", and fillMode="solid" explicitly where you need the previous appearance, replace null with undefined or omit the properties, and update the CSS and tests that depend on the removed classes. The layout-appearance-null-props codemod removes the literal null values automatically.

• TabStrip—The size property no longer has a default value.

  • Before: <TabStrip /> rendered the k-tabstrip-md class.
  • After: <TabStrip /> does not render k-tabstrip-md. The TabStrip size type still accepts null.
  • To migrate, set size="medium" explicitly to keep the previous appearance, and update the CSS and tests that depend on the removed class.

• Breadcrumb—The size property no longer has a default value, and its type no longer accepts null. The markup is unchanged, because the Breadcrumb still renders k-breadcrumb-md when size is not set.

  • To migrate, replace null with undefined or omit the property.

ListBox

• ListBox—The size property no longer has a default value ('medium'), and its type no longer accepts null and arbitrary strings. The type accepts only 'small', 'medium', and 'large'.

  • Before: <ListBox /> rendered k-list k-list-md.
  • After: <ListBox /> renders k-list.
  • To migrate, set size="medium" explicitly to keep k-list-md, replace null with undefined or omit the property, and update the CSS and tests that depend on the removed class. The listbox-appearance-null-props codemod removes the literal null values automatically.

TreeList

• TreeList—The size property no longer has a default value ('medium'), and it now also accepts 'none'. The TreeList no longer passes a size to the header table, the filter row, and the Pager, and the FilterCell and Pager child controls no longer receive a default size.

  • Before: <TreeList /> rendered k-table-md on the data table and the header table, k-toolbar-md on the toolbar, and k-pager-md on the Pager.
  • After: The data table renders k-grid-md instead of k-table-md, and the header table, the toolbar, and the Pager have no size class. The wrapper keeps k-grid-md, because it is applied when size is not set. 'none' renders k-grid-none, k-table-none, and the like.
  • To migrate, set size="medium" explicitly to restore the previous classes, and update the CSS and tests that depend on the removed classes.

For the changes in the generated markup and the CSS classes, see Rendering Changes in 8.0.0.