Toolbar

ToolBars are UI elements wrapping groups of related actions or commands of equal importance.

Sass Variables

The Telerik and Kendo UI ToolBar enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-toolbar-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Toolbar.
kendo-toolbar-sm-padding-xk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the small Toolbar.
kendo-toolbar-md-padding-x$kendo-toolbar-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-toolbar-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the medium Toolbar.
kendo-toolbar-lg-padding-xk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5, 0.625rem)
Description: The horizontal padding of the large Toolbar.
kendo-toolbar-padding-yk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the Toolbar.
kendo-toolbar-sm-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the small Toolbar.
kendo-toolbar-md-padding-y$kendo-toolbar-padding-yvar(--kendo-spacing-2, 0.5rem)Default: $kendo-toolbar-padding-yComputed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the medium Toolbar.
kendo-toolbar-lg-padding-yk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5, 0.625rem)
Description: The vertical padding of the large Toolbar.
kendo-toolbar-spacingk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing between the Toolbar tools.
kendo-toolbar-sm-spacingk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem)
Description: The spacing between the tools of the small Toolbar.
kendo-toolbar-md-spacing$kendo-toolbar-spacingvar(--kendo-spacing-2, 0.5rem)Default: $kendo-toolbar-spacingComputed: var(--kendo-spacing-2, 0.5rem)
Description: The spacing between the tools of the medium Toolbar.
kendo-toolbar-lg-spacingk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5, 0.625rem)
Description: The spacing between the tools of the large Toolbar.
kendo-toolbar-separator-height$kendo-button-md-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)Default: $kendo-button-md-calc-sizeComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description: The height of the Toolbar button separator.
kendo-toolbar-sm-separator-height$kendo-button-sm-calc-sizecalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)Default: $kendo-button-sm-calc-sizeComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)
Description: The height of the small Toolbar button separator.
kendo-toolbar-md-separator-height$kendo-toolbar-separator-heightcalc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)Default: $kendo-toolbar-separator-heightComputed: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
Description: The height of the medium Toolbar button separator.
kendo-toolbar-lg-separator-height$kendo-button-lg-calc-sizecalc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)Default: $kendo-button-lg-calc-sizeComputed: calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)
Description: The height of the large Toolbar button separator.
kendo-toolbar-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the Toolbar.
kendo-toolbar-border-radiusnullnullDefault: nullComputed: null
Description: The border radius of the Toolbar.
kendo-toolbar-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the Toolbar.
kendo-toolbar-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the Toolbar.
kendo-toolbar-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the Toolbar.
kendo-toolbar-bg$kendo-base-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-base-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the Toolbar.
kendo-toolbar-text$kendo-base-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-base-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Toolbar.
kendo-toolbar-border$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-base-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The color of the border around the Toolbar.
kendo-toolbar-gradientnullnullDefault: nullComputed: null
Description: The gradient of the Toolbar.
kendo-toolbar-shadownullnullDefault: nullComputed: null
Description: The box shadow of the Toolbar.
kendo-toolbar-scroll-overlay$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))(var(--kendo-color-surface, #fafafa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))Default: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))Computed: (var(--kendo-color-surface, #fafafa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))
Description: The left and right scroll overlay of the Toolbar.
kendo-toolbar-outline-text$kendo-button-textvar(--kendo-color-on-base, #3d3d3d)Default: $kendo-button-textComputed: var(--kendo-color-on-base, #3d3d3d)
Description: The text color of the outline Toolbar.
kendo-toolbar-outline-borderif($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5))Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent)
Description: The color of the border around the outline Toolbar.
kendo-toolbar-outline-gradientnullnullDefault: nullComputed: null
Description: The gradient of the outline Toolbar.
kendo-toolbar-outline-shadownullnullDefault: nullComputed: null
Description: The box shadow of the outline Toolbar.
kendo-toolbar-outline-border-width$kendo-toolbar-border-width1pxDefault: $kendo-toolbar-border-widthComputed: 1px
Description: The width of the border around the outline Toolbar.
kendo-toolbar-outline-scroll-overlayif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))Default: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))Computed: (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))
Description: The left and right scroll overlay of the outline Toolbar.
kendo-toolbar-flat-textnullnullDefault: nullComputed: null
Description: The text color of the flat Toolbar.
kendo-toolbar-flat-border$kendo-toolbar-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-toolbar-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The color of the border around the flat Toolbar.
kendo-toolbar-flat-gradientnullnullDefault: nullComputed: null
Description: The gradient of the flat Toolbar.
kendo-toolbar-flat-shadownullnullDefault: nullComputed: null
Description: The box shadow of the flat Toolbar.
kendo-toolbar-flat-border-width1px1pxDefault: 1pxComputed: 1px
Description: Border width of the flat Toolbar.
kendo-toolbar-flat-scroll-overlayif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))(var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))Default: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))Computed: (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent))
Description: The left and right scroll overlay of the flat Toolbar.
kendo-toolbar-separator-borderinheritinheritDefault: inheritComputed: inherit
Description: The color of the separator border of the Toolbar.
kendo-toolbar-input-width10em10emDefault: 10emComputed: 10em
Description: The width of the input in the Toolbar.
kendo-toolbar-item-shadow$kendo-button-focus-shadow(0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent))Default: $kendo-button-focus-shadowComputed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent))
Description: The box shadow of the focused Toolbar item.
kendo-toolbar-overflow-container-font-size$kendo-menu-popup-md-font-sizevar(--kendo-font-size, inherit)Default: $kendo-menu-popup-md-font-sizeComputed: var(--kendo-font-size, inherit)
Description: The font size of the Toolbar overflow container.
kendo-toolbar-overflow-container-line-height$kendo-menu-popup-md-line-heightvar(--kendo-line-height, normal)Default: $kendo-menu-popup-md-line-heightComputed: var(--kendo-line-height, normal)
Description: The line-height of the Toolbar overflow container.
kendo-toolbar-overflow-button-padding-y$kendo-menu-popup-md-item-padding-yvar(--kendo-spacing-1, 0.25rem)Default: $kendo-menu-popup-md-item-padding-yComputed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Toolbar overflow button.
kendo-toolbar-overflow-button-padding-x$kendo-menu-popup-md-item-padding-xvar(--kendo-spacing-2, 0.5rem)Default: $kendo-menu-popup-md-item-padding-xComputed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Toolbar overflow button.
kendo-toolbar-sizes
sm: "padding-x":"var(--kendo-spacing-1, 0.25rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","spacing":"var(--kendo-spacing-1\\.5, 0.375rem)","separator-height":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\\.5, 0.125rem) * 2 + 1px * 2)"
md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","spacing":"var(--kendo-spacing-2, 0.5rem)","separator-height":"calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)"
lg: "padding-x":"var(--kendo-spacing-2\\.5, 0.625rem)","padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","spacing":"var(--kendo-spacing-2\\.5, 0.625rem)","separator-height":"calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)"
Computed: (sm: (padding-x: var(--kendo-spacing-1, 0.25rem), padding-y: var(--kendo-spacing-1, 0.25rem), spacing: var(--kendo-spacing-1\.5, 0.375rem), separator-height: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 1px * 2)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), spacing: var(--kendo-spacing-2, 0.5rem), separator-height: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)), lg: (padding-x: var(--kendo-spacing-2\.5, 0.625rem), padding-y: var(--kendo-spacing-2\.5, 0.625rem), spacing: var(--kendo-spacing-2\.5, 0.625rem), separator-height: calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2)))
Description: The sizes map for the Toolbar.
Feedback