Rendering Changes in 9.0.0

Updated on Nov 10, 2026

The Kendo UI for Vue 9.0.0 release introduces changes in the rendering of several components, mostly new default icons. If your application overrides the built-in CSS rules, queries the generated markup, for example in tests, or depends on the default icons, review the following changes.

The default icons are rendered as font icons (k-i-<name>) or SVG icons (k-svg-i-<name>). Update only the selectors that target the components listed below, because classes such as k-i-caret-alt-left can also belong to other components.

Buttons

• SpeechToTextButton—The default icon is now microphone instead of microphoneOutline. While listening, the button uses the stop icon instead of stopSm.

• SplitButton—The arrow uses the chevron-down icon (font icon name chevron-down, SVG icon chevronDownIcon) instead of caret-alt-down and has the k-split-button-arrow class.

• ToolbarScrollButton—The scroll buttons render fewer classes and use new default icons.

  • Before: The buttons render k-button k-icon-button k-button-md k-button-solid k-button-solid-base k-rounded-md and k-toolbar-prev or k-toolbar-next, plus k-disabled while disabled. The default icons are caret-alt-left and caret-alt-right.
  • After: The buttons render only k-button k-icon-button and k-toolbar-prev or k-toolbar-next. The k-button-md, k-button-solid, k-button-solid-base, k-rounded-md, and the conditional k-disabled classes are removed. The default icons are chevron-left and chevron-right.

Conversational UI

• AIPrompt—The rate buttons of the output view use the thumb-up and thumb-down icons instead of thumb-up-outline and thumb-down-outline.
• AIPrompt—The stop floating action button uses the stop icon instead of stop-sm.
• PromptBox—The action button uses the arrow-up icon instead of arrow-up-outline, and the stop icon instead of stop-sm while loading.
• PromptBox—The action button gets the k-generating and k-active classes while loading. Before, it got only the k-generating class.
• PromptBox—The action button renders aria-disabled="true" only when it is disabled. Before, it always rendered aria-disabled, with the value "false" when enabled.
• PromptBox—The upload button uses the paperclip icon instead of paperclip-outline-alt-right.
• PromptBox—The remove button of an attached file uses the x-circle icon instead of x-mark-sm-outline.
• PromptBox—The textarea gets aria-multiline="true" whenever the mode is not 'single', including a collapsed 'auto' mode. Before, it got aria-multiline only when the layout was multiline.

Data Tools

• Pager—The first, previous, next, and last page buttons use the chevron-double-left, chevron-left, chevron-right, and chevron-double-right icons instead of caret-alt-to-left, caret-alt-left, caret-alt-right, and caret-alt-to-right. The icons are mirrored in RTL as before. This also applies to the pager of the Grid and the TreeList.
• Pager—When the responsive property is set, the wrapper renders the k-pager-responsive class in addition to k-pager and the size class.

Date Inputs

• DateInput—The spinner buttons use the chevron-up and chevron-down icons instead of caret-alt-up and caret-alt-down.

• DateInput—The input has no default role="textbox", and aria-disabled is rendered only when the input is disabled. Before, the input rendered role="textbox" by default and aria-disabled="false" when enabled.

• DateInput, DatePicker, DateRangePicker, and DateTimePicker—The aria-controls attribute of the input (the start and end inputs of the DateRangePicker) is rendered only while the popup is open. Before, it was always rendered with the popup id.

• DateTimePicker—The Date/Time switcher in the popup is now a SegmentedControl instead of a ButtonGroup.

  • Before: The .k-datetime-buttongroup element contains a ButtonGroup (k-button-group) with two toggle buttons (k-button, with k-selected on the active one, and aria-pressed).
  • After: The .k-datetime-buttongroup element contains a stretched SegmentedControl (div.k-segmented-control.k-segmented-control-stretched with role="group", a k-segmented-control-thumb element, and k-segmented-control-button items with aria-pressed). The k-selected class marks the active item.

Dialogs

• Dialog and Window—The k-window-primary, k-window-dark, and k-window-light classes are no longer rendered on the k-window element, because the themeColor property is removed. The Dialog rendered k-window k-dialog k-window-<themeColor>, and the Window rendered, for example, k-window k-window-dark. Use the dialogClass (Dialog) or windowClass (Window) property to apply your own class.

Dropdowns

• ComboBox, DropDownList, and DropDownTree—The toggle button uses the chevron-down icon instead of caret-alt-down.
• SearchBar—The input always renders tabindex, which defaults to 0 when tabIndex is not set. Before, it rendered tabindex only when tabIndex was set.

Grid

• Grid—The group cell uses the chevron-down and chevron-right icons (chevron-left in RTL) instead of caret-alt-down and caret-alt-right (caret-alt-left in RTL).
• Grid—The pin dropdown and the Pin row context menu items use the pin, pin-top, pin-bottom, and unpin icons instead of pin-outline, pin-outline-top, pin-outline-bottom, and unpin-outline.
• Grid—The Reorder row context menu items use the chevron-down, chevron-up, chevron-down, chevron-double-up, and chevron-double-down icons instead of caret-alt-expand, caret-alt-up, caret-alt-down, caret-alt-to-top, and caret-alt-to-bottom.
• Grid—The pager buttons use the chevron-left, chevron-right, chevron-double-left, and chevron-double-right icons instead of caret-alt-left, caret-alt-right, caret-alt-to-left, and caret-alt-to-right.
• contextMenuItemsMap—The icon and svgIcon values of the exported map change accordingly. For example, 'pin-outline' becomes 'pin', and 'caret-alt-to-top' becomes 'chevron-double-up'. Update the custom context menu items that depend on the previous icon names.

Indicators

• Badge and BadgeContainer—The k-badge-dark and k-badge-light classes are removed together with the 'dark' and 'light' theme colors.
• BadgeContainer—A BadgeContainer without themeColor renders k-badge-base and k-badge-<fillMode>-base instead of k-badge-primary and k-badge-<fillMode>-primary.
• Loader—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 k-loader-base class is added.
• Loader—A Loader without themeColor no longer renders k-loader-primary.

Inputs

• ColorInput—The expand icon is chevron-down instead of caret-alt-expand.
• ColorPicker—The arrow uses the chevron-down icon instead of caret-alt-down.
• NumericTextBox—The spinner buttons use the chevron-up and chevron-down icons instead of caret-alt-up and caret-alt-down.
• Rating—An unselected item uses the star icon (k-i-star and k-svg-i-star) instead of star-outline. The selected items already use k-i-star, so adjust only the selectors that target the unselected items.
• Slider—The increase and decrease buttons use the chevron-up, chevron-down, chevron-left, and chevron-right icons instead of caret-alt-up, caret-alt-down, caret-alt-left, and caret-alt-right.

Layout

• AppBar—An AppBar without themeColor renders k-appbar-base instead of k-appbar-light. The k-appbar-light, k-appbar-dark, and k-appbar-inherit classes are no longer rendered.

• Avatar—The color class changes from k-avatar-<fillMode>-<themeColor> to k-avatar-<themeColor>. The class was rendered only when both fillMode and themeColor were set. Now it is rendered whenever themeColor is set, and no color class is rendered when it is not. For example, <Avatar fillMode="solid" /> no longer renders k-avatar-solid-primary.

• BottomNavigation—A BottomNavigation without themeColor renders k-bottom-nav-base and k-bottom-nav-flat-base instead of k-bottom-nav-primary and k-bottom-nav-flat-primary. The k-bottom-nav-info, k-bottom-nav-success, k-bottom-nav-warning, k-bottom-nav-error, k-bottom-nav-dark, and k-bottom-nav-light classes, together with their k-bottom-nav-flat-<color> and k-bottom-nav-solid-<color> variants, are no longer rendered.

• Menu—The expand arrow uses the chevron-left, chevron-right, chevron-up, and chevron-down icons (k-i-chevron-* and k-svg-i-chevron-*) instead of the caret-alt-* icons.

• PanelBar—The accessibility markup of the items changed.

  • Before: The items render aria-hidden (true when collapsed), aria-disabled (also "false"), and aria-expanded (also "false" for items without content).
  • After: The items no longer render aria-hidden. The aria-disabled attribute is rendered only when the item is disabled. The aria-expanded attribute is rendered only when the item has content or sub-items. A collapsed item that has content and no sub-items keeps a hidden div.k-panelbar-content (aria-hidden="true", display: none) in the DOM.

• Splitter—The collapse buttons of the SplitterBar use the chevron-left, chevron-right, chevron-up, and chevron-down icons (k-i-chevron-* and k-svg-i-chevron-*) instead of the caret-alt-* icons.

• Stepper—A valid Step uses the check SVG icon instead of check-outline.

ListBox

• ListBoxToolbar—The default tool icons changed from the caret icons to the chevron icons, in both the font and the SVG icon sets.

  • Before: The moveUp, moveDown, transferTo, transferFrom, transferAllTo, and transferAllFrom tools use caret-alt-up, caret-alt-down, caret-alt-right, caret-alt-left, caret-double-alt-right, and caret-double-alt-left (classes such as k-i-caret-alt-up and k-svg-i-caret-alt-up). In RTL, the right and left icons are swapped within the caret set.
  • After: The same tools use chevron-up, chevron-down, chevron-right, chevron-left, chevron-double-right, and chevron-double-left (classes such as k-i-chevron-up and k-svg-i-chevron-up). In RTL, the right and left icons are swapped within the chevron set. The remove tool still uses the x icon.

Notification

• Notification—The success type renders the check icon (k-i-check, k-svg-i-check) instead of check-outline, and the error type renders the x icon (k-i-x, k-svg-i-x) instead of x-outline.

Popup

• Popup—The Popup no longer renders its content through the Slide component of @progress/kendo-vue-animation. It renders the animation container markup itself and applies the k-slide-<direction>-enter and k-slide-<direction>-exit classes with CSS transitions.

  • Before: The markup is <div id class="k-animation-container k-animation-container-relative [k-animation-container-shown]" style="z-index; position: absolute; top; left"><div class="{popupClass} k-popup k-child-animation-container" style="transition-delay: 0ms; transition-duration: <duration>ms">content</div></div>. The k-popup element and the k-child-animation-container element are the same element, and a closed Popup renders nothing. Opening applies the k-slide-<direction>-appear and k-slide-<direction>-appear-active classes.
  • After: The markup is <div id class="k-animation-container k-animation-container-relative [k-animation-container-shown] {className}" style="z-index; position: absolute; top; left; pointer-events: auto|none"><div class="k-child-animation-container" style="transition-delay: 0ms; display: block"><div class="{popupClass} k-popup">content</div></div></div>. The k-child-animation-container element is now a wrapper around the k-popup element. Opening applies the k-slide-<direction>-enter and k-slide-<direction>-enter-active classes (the appear classes are no longer used), and closing applies the exit classes. The inline transition-duration is set only while an animation runs, and k-animation-container-shown is added after the enter animation completes.
  • A closed Popup renders a hidden <div id style="display: none" class="{className}"> instead of nothing. The id is also set on the hidden element that is rendered before the Popup mounts.

Scheduler

• SchedulerViewSelector—On desktop, the view selector is a SegmentedControl instead of a ButtonGroup. The collapsed (mobile) dropdown is unchanged.

  • Before: The selector renders the k-button-group k-toolbar-button-group k-scheduler-views classes and a k-toolbar-button button for each view.
  • After: The selector renders the k-segmented-control k-scheduler-views classes and a k-segmented-control-button for each view, and the selected one is marked with k-selected. The k-toolbar-button-group class is no longer applied.

• Scheduler—The previous and next navigation buttons, the AgendaView head and tail arrows, and the SchedulerItem continuation arrows use the chevron-left and chevron-right icons instead of caret-alt-left and caret-alt-right (the mirrored pair in RTL).

• MonthView—The events no longer set the inline transform: translateY(30px). Their offset is computed from the .k-nav-day element of the slot.

The 9.0.0 changes cover the migration from 8.x. For the later changes of the Scheduler view selector and toolbar, see Rendering Changes in 10.0.0.

TreeList

• TreeList—The icon inside the k-treelist-toggle element uses chevron-down (expanded) and chevron-right (collapsed) instead of caret-alt-down and caret-alt-right.
• TreeList—The pager buttons use the chevron-left, chevron-right, chevron-double-left, and chevron-double-right icons instead of caret-alt-left, caret-alt-right, caret-alt-to-left, and caret-alt-to-right.

For the changes in the component behavior and API, see Breaking Changes in 9.0.0.