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

Customizing Buttons

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$button-border-width1px1px
Description
Width of border around buttons
$button-border-radius$border-radius2px
Description
Border radius of buttons
$button-padding-x$padding-x
Description
Horizontal padding of buttons
$button-padding-y$padding-y
Description
Vertical padding of buttons
$button-bg#f5f5f5#f5f5f5
Description
The background of the buttons.
$button-text#424242#424242
Description
The text color of the buttons.
$button-borderrgba( black, .08 )rgba( black, .08 )
Description
The border color of the buttons.
$button-gradientrgba( black, 0 ), rgba( black, .02 )rgba( black, 0 ), rgba( black, .02 )
Description
The background gradient of the buttons.
$button-hovered-bgtry-shade( $button-bg, .5 )try-shade( $button-bg, .5 )
Description
The background of hovered buttons.
$button-hovered-textnullnull
Description
The text color of hovered buttons.
$button-hovered-bordernullnull
Description
The border color of hovered buttons.
$button-hovered-gradientnullnull
Description
The background gradient of hovered buttons.
$button-active-bgtry-shade( $button-bg, 1 )try-shade( $button-bg, 1 )
Description
The background color of active buttons.
$button-active-textnullnull
Description
The text color of active buttons.
$button-active-bordernullnull
Description
The border color of active buttons.
$button-active-gradientnullnull
Description
The background gradient of active buttons.
$button-selected-bg$primary$accent
Description
The background color of selected buttons.
$button-selected-textcontrast-wcag( $button-selected-bg )contrast-wcag( $button-selected-bg )
Description
The text color of selected buttons.
$button-selected-border$button-selected-bg$accent
Description
The border color of selected buttons.
$button-selected-gradientnullnull
Description
The background gradient of selected buttons.
$button-focused-shadow0 0 0 2px rgba( $button-border, .08 )0 0 0 2px rgba( $button-border, .08 )
Description
The shadow of focused buttons.

In this article

Not finding the help you need?