New to KendoReact? Start a free 30-day trial

ToolbarProps

Interface

Represents the props of the KendoReact Toolbar component.

Definition

Package:@progress/kendo-react-buttons

Properties

ariaLabel?

string

Represents the aria-label HTML attribute of the Toolbar component.

Example:

jsx

<Toolbar ariaLabel="Main toolbar" />

buttonScrollSpeed?

number

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.

Default:

100

children?

ReactNode

Determines the children nodes.

className?

string

Sets additional classes to the Toolbar.

Example:

jsx

<Toolbar className="custom-toolbar" />

dir?

string

Represents the dir HTML attribute.

Example:

jsx

<Toolbar dir="rtl" />

fillMode?

"solid" | "outline" | "flat"

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.

Default:

undefined (theme-controlled)

Example:

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.

Example:

jsx

<Toolbar keyboardNavigation={false} />

nextButton?

ComponentType<object>

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.

Parameters:eventToolbarResizeEvent

Example:

jsx

<Toolbar onResize={(event) => console.log(event)} />

overflow?

"none" | "section" | "scroll"

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

Default:

none

prevButton?

ComponentType<object>

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" | "hidden" | "visible"

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

Default:

auto

scrollButtonsPosition?

"start" | "end" | "split"

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

Default:

split

size?

"small" | "medium" | "large"

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.

Default:

undefined (theme-controlled)

Example:

jsx

<Toolbar size="large" />

style?

CSSProperties

The styles that are applied to the Toolbar.

Example:

jsx

<Toolbar style={{ backgroundColor: 'lightblue' }} />

tabIndex?

number

Specifies the tabIndex of the Toolbar.

Example:

jsx

<Toolbar tabIndex={0} />