New to KendoReact? Start a free 30-day trial
Customizing Buttons
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $button-border-width | $btn-border-width | ||
Description Width of border around buttons | |||
| $button-border-radius | $border-radius | $border-radius | |
Description Border radius of buttons | |||
| $button-padding-x | $btn-padding-x | ||
Description Horizontal padding of buttons | |||
| $button-padding-y | $btn-padding-y | ||
Description Vertical padding of buttons | |||
| $button-bg | #e4e7eb | #e4e7eb | |
Description The background of the buttons. | |||
| $button-text | contrast-wcag( $button-bg, $gray-900 ) | contrast-wcag( $button-bg, $gray-900 ) | |
Description The text color of the buttons. | |||
| $button-border | $button-bg | #e4e7eb | |
Description The border color of the buttons. | |||
| $button-gradient | null | null | |
Description The background gradient of the buttons. | |||
| $button-hovered-bg | try-darken( $button-bg, 7.5% ) | try-darken( $button-bg, 7.5% ) | |
Description The background of hovered buttons. | |||
| $button-hovered-text | null | null | |
Description The text color of hovered buttons. | |||
| $button-hovered-border | try-darken( $button-border, 10% ) | try-darken( $button-border, 10% ) | |
Description The border color of hovered buttons. | |||
| $button-hovered-gradient | null | null | |
Description The background gradient of hovered buttons. | |||
| $button-active-bg | try-darken( $button-bg, 10% ) | try-darken( $button-bg, 10% ) | |
Description The background color of active buttons. | |||
| $button-active-text | null | null | |
Description The text color of active buttons. | |||
| $button-active-border | try-darken( $button-border, 12.5% ) | try-darken( $button-border, 12.5% ) | |
Description The border color of active buttons. | |||
| $button-active-gradient | null | null | |
Description The background gradient of active buttons. | |||
| $button-selected-bg | try-darken( $primary, 10% ) | try-darken( $primary, 10% ) | |
Description The background color of selected buttons. | |||
| $button-selected-text | contrast-wcag( $button-selected-bg ) | contrast-wcag( $button-selected-bg ) | |
Description The text color of selected buttons. | |||
| $button-selected-border | try-darken( $primary, 12.5% ) | try-darken( $primary, 12.5% ) | |
Description The border color of selected buttons. | |||
| $button-selected-gradient | null | null | |
Description The background gradient of selected buttons. | |||
| $button-focused-shadow | 0 0 0 3px rgba( $button-border, .5 ) | 0 0 0 3px rgba( $button-border, .5 ) | |
Description The shadow of focused buttons. | |||
