ToolbarProps

Represents the props of the KendoReact Toolbar component.

Name	Type	Default	Description
ariaLabel?	string		Represents the aria-label HTML attribute of the Toolbar component. jsx <Toolbar ariaLabel="Main 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.
children?	React.ReactNode		Determines the children nodes.
className?	string		Sets additional classes to the Toolbar. jsx <Toolbar className="custom-toolbar" />
dir?	string		Represents the dir HTML attribute. jsx <Toolbar dir="rtl" />
fillMode?	"null" | "flat" | "solid" | "outline"	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. jsx <Toolbar fillMode="flat" />
id?	string		Sets the id property of the top div element of the component.
keyboardNavigation?	boolean		If set to false, it will turn off the built-in keyboard navigation. jsx <Toolbar keyboardNavigation={false} />
nextButton?	React.ComponentType<undefined>		Defines the custom component that will be rendered as a next button. To remove the button, set a function which returns null () => null.
onResize?	(event: ToolbarResizeEvent) => void		The resize event of the Toolbar. jsx <Toolbar onResize={(event) => console.log(event)} />
overflow?	"section" | "none" | "scroll"	none	Represents the possible overflow mode options of the Toolbar. Applicable when there is not enough space to render all tools.
prevButton?	React.ComponentType<undefined>		Defines the custom component that will be rendered as a previous button. To remove the button, set a function which returns null () => null.
scrollButtons?	"auto" | "visible" | "hidden"	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?	"null" | "small" | "large" | "medium"	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—This option removes the the built-in size styles of the Toolbar. Allows for custom padding. jsx <Toolbar size="large" />
style?	React.CSSProperties		The styles that are applied to the Toolbar. jsx <Toolbar style={{ backgroundColor: 'lightblue' }} />
tabIndex?	number		Specifies the tabIndex of the Toolbar. jsx <Toolbar tabIndex={0} />