Styling & Themes / Bootstrap Theme / Customizing Toolbar / 

Customizing Toolbar

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-toolbar-padding-xNull

null

null

Description
The horizontal padding of the toolbar.
$kendo-toolbar-padding-yNull

null

null

Description
The vertical padding of the toolbar.
$kendo-toolbar-spacingNull

null

null

Description
The spacing between the toolbar tools.
$kendo-toolbar-border-widthNumber

1px

1px

Description
Width of the border around the toolbar.
$kendo-toolbar-border-radiusNull

null

null

Description
Border radius of the toolbar.
$kendo-toolbar-font-familyList

$kendo-font-family

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Description
Font family of the toolbar.
$kendo-toolbar-font-sizeNumber

$kendo-font-size-md

1rem

Description
Font size of the toolbar.
$kendo-toolbar-line-heightNumber

$kendo-line-height-md

1.5

Description
Line height of the toolbar.
$kendo-toolbar-bgColor

$kendo-component-header-bg

#f8f9fa

Description
Background color of the toolbar.
$kendo-toolbar-textColor

$kendo-component-header-text

#212529

Description
Text color of the toolbar.
$kendo-toolbar-borderColor

$kendo-component-header-border

#dee2e6

Description
Color of the border around the toolbar.
$kendo-toolbar-gradientNull

null

null

Description
Gradient of the toolbar.
$kendo-toolbar-shadowNull

null

null

Description
Box shadow of the toolbar.
$kendo-toolbar-separator-borderString

inherit

inherit

Description
Color of the separator border of the toolbar.
$kendo-toolbar-input-widthNumber

10em

10em

Description
The width of the input in the toolbar.
$kendo-toolbar-item-shadowList

0 0 0 .25rem rgba( $kendo-color-primary, .25 )

0 0 0 0.25rem rgba(13, 110, 253, 0.25)

Description
Box shadow of the focused toolbar item.
$kendo-toolbar-sizesMap

( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )

(sm: (padding-x: 0.25rem, padding-y: 0.25rem, spacing: 0.375rem), md: (padding-x: 0.5rem, padding-y: 0.5rem, spacing: 0.5rem), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: 0.625rem))

Description
Sizes map for the toolbar.

Suggested Links

Previous
Customizing Tabstrip
Next
Customizing Treeview

In this article

Not finding the help you need?

Contact Support