New to Kendo UI for Vue? Start a free 30-day trial

Customizing Toolbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-toolbar-border-widthNumber1px1px
Description
Width of the border around the toolbar.
$kendo-toolbar-font-familyNullnullnull
Description
Font family of the toolbar.
$kendo-toolbar-font-sizeNumber$kendo-font-size-md1rem
Description
Font size of the toolbar.
$kendo-toolbar-line-heightNumber$kendo-line-height-md1.5
Description
Line height of the toolbar.
$kendo-toolbar-input-widthNumber10em10em
Description
The width of the input in the toolbar.
$kendo-toolbar-item-focus-outline-widthNumber1px1px
Description
Border width of the focused toolbar item.
$kendo-toolbar-item-focus-outline-styleStringsolidsolid
Description
Border style 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: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-1, 0.25rem)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem)), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: var(--kendo-spacing-2, 0.5rem)))
Description
Sizes map for the toolbar.

In this article

Not finding the help you need?