Customizing Button

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-button-border-width	Number	`$btn-border-width`	`1px`
Description Width of the border around the button.
$kendo-button-border-radius	Null	`null`	`null`
Description Border radius of the button.
$kendo-button-padding-x	Number	`$btn-padding-x`	`0.75rem`
Description Horizontal padding of the button.
$kendo-button-padding-y	Number	`$btn-padding-y`	`0.375rem`
Description Vertical padding of the button.
$kendo-button-font-family	List	`$font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
Description Font family of the button.
$kendo-button-font-size	Number	`$btn-font-size`	`1rem`
Description Font sizes of the button.
$kendo-button-line-height	Number	`$btn-line-height`	`1.5`
Description Line heights used along with $font-size.
$kendo-button-calc-size	Calculation	`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-size	Calculation	`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-colors	Map	`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-bg	Color	`#e4e7eb`	`#e4e7eb`
Description The base background of the button.
$kendo-button-text	Color	`contrast-wcag( $kendo-button-bg, $gray-900 )`	`#212529`
Description The base text color of the button.
$kendo-button-border	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base border color of the button.
$kendo-button-gradient	Null	`null`	`null`
Description The base background gradient of the button.
$kendo-button-shadow	Null	`null`	`null`
Description The base shadow of the button.
$kendo-button-hover-bg	Color	`try-darken( $kendo-button-bg, 7.5% )`	`#ced3db`
Description The base background of hovered button.
$kendo-button-hover-text	Null	`null`	`null`
Description The base text color of hovered button.
$kendo-button-hover-border	Color	`try-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
Description The base border color of hovered button.
$kendo-button-hover-gradient	Null	`null`	`null`
Description The base background gradient of hovered button.
$kendo-button-hover-shadow	Null	`null`	`null`
Description The base shadow of hovered button.
$kendo-button-active-bg	Color	`try-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
Description The base background color of active button.
$kendo-button-active-text	Null	`null`	`null`
Description The base text color of active button.
$kendo-button-active-border	Color	`try-darken( $kendo-button-bg, 12.5% )`	`#bfc6d0`
Description The base border color of active button.
$kendo-button-active-gradient	Null	`null`	`null`
Description The base background gradient of active button.
$kendo-button-active-shadow	Null	`null`	`null`
Description The base shadow of active button.
$kendo-button-selected-bg	Color	`try-darken( $primary, 10% )`	`#0257d5`
Description The base background color of selected button.
$kendo-button-selected-text	Color	`contrast-wcag( $kendo-button-selected-bg )`	`white`
Description The text color of selected buttons.
$kendo-button-selected-border	Color	`try-darken( $primary, 12.5% )`	`#0252c9`
Description The border color of selected buttons.
$kendo-button-selected-gradient	Null	`$kendo-button-active-gradient`	`null`
Description The background gradient of selected buttons.
$kendo-button-selected-shadow	Null	`$kendo-button-active-shadow`	`null`
Description The base shadow of selected button.
$kendo-button-focus-bg	Color	`try-darken( $kendo-button-bg, 10% )`	`#c7cdd5`
Description The base background of focused button.
$kendo-button-focus-text	Null	`null`	`null`
Description The base text color of focused button.
$kendo-button-focus-border	Color	`try-darken( $kendo-button-bg, 12.5% )`	`#bfc6d0`
Description The base border color of focused button.
$kendo-button-focus-gradient	Null	`null`	`null`
Description The base background gradient of focused button.
$kendo-button-focus-shadow	List	`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-bg	Null	`null`	`null`
Description The base background of disabled button.
$kendo-button-disabled-text	Null	`null`	`null`
Description The base text color of disabled button.
$kendo-button-disabled-border	Null	`null`	`null`
Description The base border color of disabled buttons.
$kendo-button-disabled-gradient	Null	`null`	`null`
Description The base background gradient of disabled button.
$kendo-button-disabled-shadow	Null	`null`	`null`
Description The base shadow of disabled button.
$kendo-flat-button-hover-opacity	Number	`.08`	`0.08`
Description The overlay opacity of hovered flat button. Used to create background for the flat button.
$kendo-flat-button-focus-opacity	Null	`null`	`null`
Description The overlay opacity of focused flat button. Used to create background for the flat button.
$kendo-flat-button-active-opacity	Number	`.16`	`0.16`
Description The overlay opacity of active flat button. Used to create background for the flat button.
$kendo-flat-button-selected-opacity	Number	`.2`	`0.2`
Description The overlay opacity of selected flat button. Used to create background for the flat button.
$kendo-button-transition	List	`$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.

Customizing Button

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community