New to KendoReact? Learn about KendoReact Free.

Appearance

The KendoReact Toolbar allows selecting a predefined size and fill mode options that changes its appearance.

Size

To change the default size of the Toolbar, set its size property which will change the padding of the Toolbar element. The available size options are:

small—Sets the padding of the component to 4px 4px.
medium (default)—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.

The following example demonstrates how to define the Toolbar size:

Change Theme

Theme

Loading ...

Fill Mode

To change the default fill mode of the Toolbar, set its fillMode property. It accepts the following values:

solid (default)—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.

The fillMode property only affects the appearance of the ToolBar component and does not propagate to the ToolBar tools. Each ToolBar tool has a dedicated fillMode property that can be defined individually.

The following example demonstrates how to define a fill mode only for the ToolBar and including the ToolBar tools.