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

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, 4 )

16px

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

map-get( $spacing, 2 )

8px

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

$font-family

Roboto, "Helvetica Neue", sans-serif

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

$font-size-md

14px

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

( 20 / 14 )

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 + 16px + 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 + 16px )

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

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

("primary": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242, "base": white)

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

$base-bg

white

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

$base-text

rgba(0, 0, 0, 0.87)

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

$kendo-button-bg

white

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

null

null

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

$box-shadow-depth-2

0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)

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

null

null

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-bgNull

null

null

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-shadowList

$box-shadow-depth-3

0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)

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

$kendo-button-active-bg

null

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

$kendo-button-active-text

null

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

$kendo-button-active-bg

null

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

null

null

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

null

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-shadowNull

null

null

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

try-shade( $body-bg, 12% )

#e0e0e0

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

$disabled-text

rgba(0, 0, 0, 0.38)

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

$kendo-button-disabled-bg

#e0e0e0

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

null

null

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

none

none

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

.08

0.08

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

.12

0.12

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

.22

0.22

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

box-shadow 280ms cubic-bezier( .4, 0, .2, 1 )

box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)

Description
The transition of the button.

In this article

Not finding the help you need?