Styling & Themes / Bootstrap Theme / Customizing Button / 
New to Kendo UI for Vue? Start a free 30-day trial

Customizing Button

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-button-border-widthNumber

$btn-border-width

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

$btn-padding-x

0.75rem

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

$btn-padding-y

0.375rem

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

$kendo-font-family

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

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

$btn-font-size

1rem

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

$btn-line-height

1.5

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

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

calc( 1.5em + 0.75rem + 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.5em + 0.75rem )

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

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

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb)

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

#e4e7eb

#e4e7eb

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

k-contrast-color( $kendo-button-bg, $gray-900 )

#212529

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

$kendo-button-bg

#e4e7eb

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

null

null

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

null

null

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

k-try-darken( $kendo-button-bg, 7.5% )

#ced3db

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

null

null

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

k-try-darken( $kendo-button-bg, 10% )

#c7cdd5

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

k-try-darken( $kendo-button-bg, 10% )

#c7cdd5

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

k-try-darken( $kendo-button-bg, 12.5% )

#bfc6d0

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

k-try-darken( $kendo-color-primary, 10% )

#0257d5

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

k-contrast-color( $kendo-button-selected-bg )

white

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

k-try-darken( $kendo-color-primary, 12.5% )

#0252c9

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

k-try-darken( $kendo-button-bg, 10% )

#c7cdd5

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

null

null

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

k-try-darken( $kendo-button-bg, 12.5% )

#bfc6d0

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 .25rem rgba( $kendo-button-border, .5 )

0 0 0 0.25rem rgba(228, 231, 235, 0.5)

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

.08

0.08

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-flat-button-focus-ring-opacityNumber

.12

0.12

Description
The opacity of the flat button focus ring. Used to create border for the flat button.
$kendo-button-transitionList

$kendo-transition

color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out

Description
The color transition of the button.

Suggested Links

Previous
Customizing Badge
Next
Customizing Charts

In this article

Not finding the help you need?

Contact Support