Customizing Button

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber1px1px
Description
The width of the border around the Button.
$kendo-button-border-radiusNullnullnull
Description
The border radius of the Button.
$kendo-button-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the Button.
$kendo-button-sm-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the small Button.
$kendo-button-md-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the medium Button.
$kendo-button-lg-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the large Button.
$kendo-button-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the Button.
$kendo-button-sm-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the small Button.
$kendo-button-md-padding-yNumberk-map-get( $kendo-spacing, 2 )8px
Description
The vertical padding of the medium Button.
$kendo-button-lg-padding-yNumberk-map-get( $kendo-spacing, 2.5 )10px
Description
The vertical padding of the large Button.
$kendo-button-font-familyList$kendo-font-familyRoboto, "Helvetica Neue", sans-serif
Description
The font family of the Button.
$kendo-button-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Button.
$kendo-button-sm-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the small Button.
$kendo-button-md-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the medium Button.
$kendo-button-lg-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the large Button.
$kendo-button-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
Line heights used along with the $kendo-font-size variable.
$kendo-button-sm-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height used along with the $kendo-font-size variable of the small Button.
$kendo-button-md-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height used along with the $kendo-font-size variable of the medium Button.
$kendo-button-lg-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height used along with the $kendo-font-size variable of the large Button.
$kendo-button-calc-sizeCalculationcalc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )calc(1.4285714286em + 16px + 2px)
Description
The calculated height of the Button.
$kendo-button-inner-calc-sizeCalculationcalc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )calc(1.4285714286em + 16px)
Description
The calculated inner height of the Button excluding the border width.
$kendo-button-sizesMap( sm: ( padding-x: $kendo-button-sm-padding-x, padding-y: $kendo-button-sm-padding-y, font-size: $kendo-button-sm-font-size, line-height: $kendo-button-sm-line-height ), md: ( padding-x: $kendo-button-md-padding-x, padding-y: $kendo-button-md-padding-y, font-size: $kendo-button-md-font-size, line-height: $kendo-button-md-line-height ), lg: ( padding-x: $kendo-button-lg-padding-x, padding-y: $kendo-button-lg-padding-y, font-size: $kendo-button-lg-font-size, line-height: $kendo-button-lg-line-height ) )(sm: (padding-x: 16px, padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (padding-x: 16px, padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (padding-x: 16px, padding-y: 10px, font-size: 14px, line-height: 1.4285714286))
Description
The sizes map for the Button.
$kendo-button-theme-colorsMapk-map-merge( $kendo-theme-colors, ( "base": $kendo-base-bg ) )("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242, "base": #ffffff)
Description
The theme colors map for the Button.
$kendo-button-bgColor$kendo-base-bg#ffffff
Description
The base background of the Button.
$kendo-button-textColor$kendo-base-textrgba(0, 0, 0, 0.87)
Description
The base text color of the Button.
$kendo-button-borderColor$kendo-button-bg#ffffff
Description
The base border color of the Button.
$kendo-button-gradientNullnullnull
Description
The base background gradient of the Button.
$kendo-button-shadowString$box-shadow-depth-2var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the Button.
$kendo-button-hover-bgNullnullnull
Description
The base background of the hovered Button.
$kendo-button-hover-textNullnullnull
Description
The base text color of the hovered Button.
$kendo-button-hover-borderNullnullnull
Description
The base border color of the hovered Button.
$kendo-button-hover-gradientNullnullnull
Description
The base background gradient of the hovered Button.
$kendo-button-hover-shadowNullnullnull
Description
The base shadow of the hovered Button.
$kendo-button-active-bgNullnullnull
Description
The base background color of the active Button.
$kendo-button-active-textNullnullnull
Description
The base text color of the active Button.
$kendo-button-active-borderNullnullnull
Description
The base border color of the active Button.
$kendo-button-active-gradientNullnullnull
Description
The base background gradient of the active Button.
$kendo-button-active-shadowString$box-shadow-depth-6var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the active Button.
$kendo-button-selected-bgNull$kendo-button-active-bgnull
Description
The base background color of the selected Button.
$kendo-button-selected-textNull$kendo-button-active-textnull
Description
The base text color of the selected Button.
$kendo-button-selected-borderNull$kendo-button-active-bgnull
Description
The base border color of the selected Button.
$kendo-button-selected-gradientNullnullnull
Description
The base background gradient of the selected Button.
$kendo-button-selected-shadowNullnullnull
Description
The base shadow of the selected Button.
$kendo-button-focus-bgNullnullnull
Description
The base background of the focused Button.
$kendo-button-focus-textNullnullnull
Description
The base text color of the focused Button.
$kendo-button-focus-borderNullnullnull
Description
The base border color of the focused Button.
$kendo-button-focus-gradientNullnullnull
Description
The base background gradient of focused Button.
$kendo-button-focus-shadowNullnullnull
Description
The base shadow of the focused Button.
$kendo-button-disabled-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-shade( $kendo-body-bg, 12% ))#e0e0e0
Description
The base background color of the disabled Button.
$kendo-button-disabled-textColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), $kendo-disabled-text)rgba(0, 0, 0, 0.38)
Description
The base text color of the disabled Button.
$kendo-button-disabled-borderColorif($kendo-enable-color-system, transparent, $kendo-button-disabled-bg)#e0e0e0
Description
The base border color of the disabled Button.
$kendo-button-disabled-gradientNullnullnull
Description
The base background gradient of the disabled Button.
$kendo-button-disabled-shadowStringnonenone
Description
The base shadow of the disabled Button.
$kendo-flat-button-hover-opacityNumber.080.08
Description
The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-opacityNumber.120.12
Description
The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
$kendo-flat-button-active-opacityNumber.160.16
Description
The overlay opacity of the active flat Button. Used to create a background for the flat Button.
$kendo-flat-button-selected-opacityNumber.220.22
Description
The overlay opacity of the selected flat Button. Used to create a background for the flat Button.
$kendo-flat-button-focus-ring-opacityNullnullnull
Description
The opacity of the flat Button focus ring. Used to create a border for the flat Button.
$kendo-button-transitionListbox-shadow 280ms cubic-bezier( .4, 0, .2, 1 )box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)
Description
The box-shadow transition of the Button.

In this article

Not finding the help you need?