Customizing Button

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber

1px

1px

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

null

null

Description
Border radius of the button.
$kendo-button-padding-xNumber

map-get( $spacing, 2 )

8px

Description
Horizontal padding of the button.
$kendo-button-padding-yNumber

map-get( $spacing, 1 )

4px

Description
Vertical padding of the button.
$kendo-button-font-familyString

$font-family

inherit

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

$font-size-md

14px

Description
Font sizes of the button.
$kendo-button-line-heightNumber

$line-height-md

1.4285714286

Description
Line heights used along with $font-size.
$kendo-button-calc-sizeCalculation

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} )

calc( 1.4285714286em + 8px + 2px )

Description
Calculated height of the button.
$kendo-button-inner-calc-sizeCalculation

calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} )

calc( 1.4285714286em + 8px )

Description
Calculated inner height of the button. Without the border width.
$kendo-button-theme-colorsMap

map-merge( $kendo-theme-colors, ( "base": #f5f5f5 ) )

("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242, "base": #f5f5f5)

Description
Theme colors map for the button.
$kendo-button-bgColor

#f5f5f5

#f5f5f5

Description
The base background of the button.
$kendo-button-textColor

#424242

#424242

Description
The base text color of the button.
$kendo-button-borderColor

rgba( black, .08 )

rgba(0, 0, 0, 0.08)

Description
The base border color of the button.
$kendo-button-gradientList

rgba( black, 0 ), rgba( black, .02 )

rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)

Description
The base background gradient of the button.
$kendo-button-shadowNull

null

null

Description
The base shadow of the button.
$kendo-button-hover-bgColor

try-shade( $kendo-button-bg, .5 )

#ebebeb

Description
The base background of hovered button.
$kendo-button-hover-textNull

null

null

Description
The base text color of hovered button.
$kendo-button-hover-borderNull

null

null

Description
The base border color of hovered button.
$kendo-button-hover-gradientNull

null

null

Description
The base background gradient of hovered button.
$kendo-button-hover-shadowNull

null

null

Description
The base shadow of hovered button.
$kendo-button-active-bgColor

try-shade( $kendo-button-bg, 1.5 )

#d8d8d8

Description
The base background color of active button.
$kendo-button-active-textNull

null

null

Description
The base text color of active button.
$kendo-button-active-borderNull

null

null

Description
The base border color of active button.
$kendo-button-active-gradientNull

null

null

Description
The base background gradient of active button.
$kendo-button-active-shadowNull

null

null

Description
The base shadow of active button.
$kendo-button-selected-bgColor

$primary

#ff6358

Description
The base background color of selected button.
$kendo-button-selected-textColor

contrast-wcag( $kendo-button-selected-bg )

white

Description
The text color of selected buttons.
$kendo-button-selected-borderColor

$kendo-button-selected-bg

#ff6358

Description
The border color of selected buttons.
$kendo-button-selected-gradientNull

$kendo-button-active-gradient

null

Description
The background gradient of selected buttons.
$kendo-button-selected-shadowNull

$kendo-button-active-shadow

null

Description
The base shadow of selected button.
$kendo-button-focus-bgNull

null

null

Description
The base background of focused button.
$kendo-button-focus-textNull

null

null

Description
The base text color of focused button.
$kendo-button-focus-borderNull

null

null

Description
The base border color of focused button.
$kendo-button-focus-gradientNull

null

null

Description
The base background gradient of focused button.
$kendo-button-focus-shadowList

0 0 0 2px rgba( $kendo-button-border, .08 )

0 0 0 2px rgba(0, 0, 0, 0.08)

Description
The base shadow of focused button.
$kendo-button-disabled-bgNull

null

null

Description
The base background of disabled button.
$kendo-button-disabled-textNull

null

null

Description
The base text color of disabled button.
$kendo-button-disabled-borderNull

null

null

Description
The base border color of disabled buttons.
$kendo-button-disabled-gradientNull

null

null

Description
The base background gradient of disabled button.
$kendo-button-disabled-shadowNull

null

null

Description
The base shadow of disabled button.
$kendo-flat-button-hover-opacityNumber

.04

0.04

Description
The overlay opacity of hovered flat button. Used to create background for the flat button.
$kendo-flat-button-focus-opacityNull

null

null

Description
The overlay opacity of focused flat button. Used to create background for the flat button.
$kendo-flat-button-active-opacityNumber

.16

0.16

Description
The overlay opacity of active flat button. Used to create background for the flat button.
$kendo-flat-button-selected-opacityNumber

.2

0.2

Description
The overlay opacity of selected flat button. Used to create background for the flat button.
$kendo-button-transitionList

color .2s ease-in-out

color 0.2s ease-in-out

Description
The color transition of the flat button.

In this article

Not finding the help you need?