New to Kendo UI for VueStart a free 30-day trial

ToolbarProps

Updated on Nov 7, 2025

Represents the props of the Kendo UI for Vue Toolbar component.

NameTypeDefaultDescription

ariaLabel?

string

Defines the aria-label HTML attribute of the Toolbar.

buttonScrollSpeed?

number

100

Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button. Applicable when the overflow property is set to scroll.

className?

string

Sets additional classes to the Toolbar.

dir?

string

Represents the dir HTML attribute.

fillMode?

string

solid

Configures the fillMode of the Toolbar.

The available options are:

  • solid—Applies a background color and solid borders.
  • flat—Sets a transparent background and solid bottom border.
  • outline—Sets a transparent background and solid borders.
  • null—This option removes the built-in fill mode styles of the Toolbar. Allows for custom background and border styles.

keyboardNavigation?

boolean

If set to false, it will turn off the built-in keyboard navigation.

nextButton?

any

Defines the custom component that will be rendered as a next button.

onResize?

(event: ToolbarResizeEvent) => void

The resize event of the Toolbar.

overflow?

"section" | "scroll" | "none"

section

Represents the possible overflow mode options of the Toolbar. Applicable when there is not enough space to render all tools.

prevButton?

any

Defines the custom component that will be rendered as a previous button.

scrollButtons?

"auto" | "hidden" | "visible"

auto

Determines the Toolbar scroll buttons visibility. Applicable when the overflow property is set to scroll.

scrollButtonsPosition?

"split" | "end" | "start"

split

Determines the Toolbar scroll buttons position. Applicable when the overflow property is set to scroll.

size?

string

medium

Configures the size of the Toolbar.

The available options are:

  • small—sets the padding of the component to 4px 4px
  • medium—sets the padding of the component to 8px 8px
  • large—sets the padding of the component to 10px 10px
  • null—removes the styling related to the Toolbar sizing option

tabIndex?

number

Specifies the tabIndex of the Toolbar.

Not finding the help you need?
Contact Support