Knowledge Base
FAQ
API Reference
Updates / Breaking Changes / 9.0.0
New to Kendo UI for Vue? Start a free 30-day trial

Breaking Changes in 9.0.0

Updated on Nov 10, 2026

The Kendo UI for Vue 9.0.0 release narrows the supported themeColor values of several components and removes the themeColor property of the Dialog and the Window. 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.

Buttons

  • Button—The themeColor property no longer accepts the 'dark' and 'light' values. This also applies to SmartPasteButton and SpeechToTextButton, which extend the Button properties and pass themeColor to the Button.

    • Before: <Button themeColor="dark" /> or <Button :theme-color="'light'" /> was part of the themeColor type.
    • After: themeColor is 'base', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', or 'inverse'. The Button has no runtime validator, so an old value is not reported at runtime.
    • To migrate, replace the removed values and update the custom CSS and tests that target the buttons by their removed theme color, for example k-button-solid-dark or k-button-outline-light. There is no one-to-one replacement. The 'inverse' value is the closest to the dark appearance, but choose the value that matches your design.

  • DropDownButton and SplitButton—The themeColor property no longer accepts the 'dark' and 'light' values.

    • Before: <DropDownButton themeColor="dark" /> or <SplitButton :theme-color="'light'" /> was part of the themeColor type.
    • After: themeColor is 'base', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', or 'inverse'. The removed values fail the prop validator.
    • To migrate, replace the removed values and update the custom CSS and tests that target the buttons by their removed theme color. There is no one-to-one replacement. The 'inverse' value is the closest to the dark appearance, but choose the value that matches your design.

  • FloatingActionButton—The themeColor property (FloatingActionButtonThemeColor) now accepts only 'base', 'primary', 'secondary', and 'tertiary'.

    • Before: themeColor also accepted 'info', 'success', 'warning', 'error', 'dark', 'light', and 'inverse'.
    • After: The removed values are no longer supported. The component has no runtime validator, so an old value is not reported. It is still rendered as the k-fab-<themeColor> class, but it is no longer a supported theme color. The FloatingActionButton source applies no default themeColor. When the property is omitted, no k-fab-<themeColor> class is rendered, even though the API documentation lists 'base' as the default.
    • To migrate, replace the removed values with a supported one, set themeColor explicitly if you depend on a color, and update the custom CSS and tests that target the removed k-fab-<color> classes. There is no one-to-one replacement.

Common

  • FontIcon, Icon, and SvgIcon—The themeColor property (IconThemeColor) no longer accepts the 'dark' and 'light' values.

    • Before: <SvgIcon :icon="icon" themeColor="dark" /> was part of the themeColor type.
    • After: themeColor is 'inherit', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', or 'inverse'. The components have no runtime validator, so the removed values are not reported. They are still rendered as the k-color-<themeColor> class, but they are no longer supported theme colors.
    • To migrate, omit themeColor or set it to 'inherit' and set the color on the parent element, or use a supported value. Update the CSS selectors and tests that depend on the k-color-dark and k-color-light classes of the icons. There is no one-to-one replacement.

Dialogs

  • Dialog and Window—The themeColor property is removed, and the k-window-primary, k-window-dark, and k-window-light theme classes are no longer rendered.

    • Before: <Dialog themeColor="dark" /> or <Window :theme-color="color" /> rendered the k-window-<themeColor> class.
    • After: The property does not exist, and no theme class is rendered.
    • To migrate, remove the themeColor (theme-color) attribute and style the component through the dialogClass property of the Dialog or the windowClass property of the Window. Update the custom CSS and tests that depend on the removed k-window-<themeColor> classes. The dialog-window-theme-color-removed codemod removes the attribute wherever it can locate it statically. Review the places it cannot reach, such as properties passed through v-bind="obj" or JSX spreads, dynamic components, and wrapper components that forward themeColor to a Dialog or a Window, together with the types of those wrappers.

Indicators

  • Badge—The themeColor property no longer accepts the 'dark' and 'light' values. They are removed from BadgeProps and BadgeThemeColor.

    • Before: <Badge themeColor="dark" /> was part of the themeColor type.
    • After: The prop validator accepts only 'base', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', and 'error'. As a result, 'inverse' and 'inherit' are also rejected, and the BadgeThemeColor type no longer includes 'inherit', 'dark', 'light', or 'inverse'.
    • To migrate, replace the removed values and update the CSS selectors and tests that depend on the removed k-badge-dark and k-badge-light classes. There is no one-to-one replacement for 'dark' and 'light'.

  • BadgeContainer—The themeColor property no longer accepts the 'dark' and 'light' values, and its default changed from 'primary' to 'base'.

    • Before: <BadgeContainer /> rendered k-badge-primary.
    • After: The validator accepts 'base', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', and 'inverse'. <BadgeContainer /> renders k-badge-base and k-badge-<fillMode>-base instead of k-badge-primary and k-badge-<fillMode>-primary.
    • To migrate, set themeColor="primary" to keep the previous default appearance, replace the removed values, and update the CSS selectors and tests that depend on the removed classes or on the previous default.

  • Loader—The themeColor property (LoaderThemeColor) now accepts only 'base', 'primary', 'secondary', and 'tertiary', and the default changed from 'primary' to no value.

    • Before: <Loader /> rendered k-loader-primary, and <Loader themeColor="success" /> rendered k-loader-success. The 'info', 'success', 'warning', 'error', 'dark', 'light', and 'inverse' values were supported.
    • After: <Loader /> renders no k-loader-<color> class. The k-loader-info, k-loader-success, k-loader-warning, k-loader-error, k-loader-dark, k-loader-light, and k-loader-inverse classes are removed, and the new k-loader-base class is added.
    • To migrate, set themeColor="primary" explicitly to keep the previous default appearance, replace the removed values, and update the CSS selectors and tests that depend on the removed classes or on the previous default. There is no one-to-one replacement for the removed values.

Layout

  • AppBar—The themeColor property (AppBarThemeColor) changed from 'light', 'dark', and 'inherit' to 'base', 'primary', 'secondary', 'tertiary', and 'inverse', and the default changed from 'light' to 'base'.

    • Before: <AppBar /> rendered k-appbar-light, and <AppBar themeColor="dark" /> rendered k-appbar-dark.
    • After: <AppBar /> renders k-appbar-base. The k-appbar-light, k-appbar-dark, and k-appbar-inherit classes are no longer rendered. A prop validator rejects any other value. The property type still allows any string, so TypeScript does not flag stale values.
    • To migrate, replace 'inherit' with a supported value, and update the CSS selectors and tests that depend on the removed classes or on the previous default. There is no one-to-one replacement for 'inherit'. The app-bar-theme-color-values codemod replaces the static 'light' values with 'base' and the static 'dark' values with 'inverse' automatically.

  • Avatar—The themeColor property now accepts only null, 'base', 'primary', 'secondary', and 'tertiary', and its default of 'primary' is removed.

    • Before: <Avatar fillMode="solid" /> rendered k-avatar-solid-primary, and <Avatar fillMode="solid" themeColor="info" /> rendered k-avatar-solid-info. The k-avatar-<fillMode>-<themeColor> class was rendered only when both fillMode and themeColor were set.
    • After: The property type no longer allows other strings, and the validator rejects them. The 'info', 'success', 'error', 'warning', 'dark', 'light', and 'inverse' values are removed, and 'inherit' is also rejected. The Avatar renders k-avatar-<themeColor> whenever themeColor is set and no color class when it is not. <Avatar fillMode="solid" /> renders no color class, and <Avatar fillMode="solid" themeColor="primary" /> renders k-avatar-solid and k-avatar-primary.
    • To migrate, set themeColor="primary" explicitly to keep a primary color, replace the removed values, and update the CSS selectors and tests that depend on the k-avatar-<fillMode>-<color> classes or on the previous default. There is no one-to-one replacement for the removed values.

  • BottomNavigation—The themeColor property (BottomNavigationThemeColor) now accepts only 'base', 'primary', 'secondary', 'tertiary', and 'inverse', and the default changed from 'primary' to 'base'.

    • Before: <BottomNavigation /> rendered k-bottom-nav-primary and k-bottom-nav-flat-primary, and <BottomNavigation themeColor="info" /> rendered k-bottom-nav-info.
    • After: <BottomNavigation /> renders k-bottom-nav-base and k-bottom-nav-flat-base. The validator rejects 'info', 'success', 'warning', 'error', 'dark', and 'light'. The k-bottom-nav-<color> classes of these values, together with their k-bottom-nav-flat-<color> and k-bottom-nav-solid-<color> variants, are no longer rendered, and k-bottom-nav-base is added.
    • To migrate, set themeColor="primary" explicitly to keep the previous default appearance, replace the removed values, and update the CSS selectors and tests that depend on the removed classes or on the previous default. There is no one-to-one replacement for the removed values.

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

Other Changes

The following changes are not breaking, but you may need to take them into account when you upgrade:

  • The Upload no longer depends on axios and sends its requests through XMLHttpRequest. The axios peer dependency is removed, and the @progress/kendo-svg-icons peer dependency range of @progress/kendo-vue-upload is now ^4.9.0 || ^5.0.0.
  • The documentation and the getting-started guides use the Meridian theme (@progress/kendo-theme-meridian), and the Kendo UI themes moved from the 13.x to the 14.x line. For more information, see Styling Overview.
  • The size property of Button, DropDownButton, and SplitButton accepts the new 'xs' value.
  • The Grid supports exporting its data to CSV. For more information, see CSV Export.
In this article
ButtonsCommonDialogsIndicatorsLayoutOther Changes
Not finding the help you need?
Contact Support