New to Kendo UI for Vue? Start a free 30-day trial
Customizing Button
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-actions-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing between the action buttons. | |||
| $kendo-button-border-width | 1px | ||
Description
The width of the border around the Button. | |||
| $kendo-button-sm-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the small Button. | |||
| $kendo-button-md-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the medium Button. | |||
| $kendo-button-lg-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the large Button. | |||
| $kendo-button-sm-padding-y | map.get( $kendo-spacing, 1 ) | ||
Description
The vertical padding of the small Button. | |||
| $kendo-button-md-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding of the medium Button. | |||
| $kendo-button-lg-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
The vertical padding of the large Button. | |||
| $kendo-button-sm-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the small Button. | |||
| $kendo-button-md-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the medium Button. | |||
| $kendo-button-lg-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the large Button. | |||
| $kendo-button-sm-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the small Button. | |||
| $kendo-button-md-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the medium Button. | |||
| $kendo-button-lg-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height used along with the $kendo-font-size variable of the large Button. | |||
| $kendo-button-font-family | var( --kendo-font-family, inherit ) | ||
Description
The font family of the Button. | |||
| $kendo-button-font-weight | var( --kendo-font-weight-bold, normal ) | ||
Description
The font weight of the Button. | |||
| $kendo-button-calc-size | calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) | ||
Description
The calculated height of the Button. | |||
| $kendo-button-inner-calc-size | calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) | ||
Description
The calculated inner height of the Button excluding the border width. | |||
| $kendo-button-sizes | (
sm: (
padding-x: $kendo-button-sm-padding-x,
padding-y: $kendo-button-sm-padding-y,
font-size: $kendo-button-sm-font-size,
line-height: $kendo-button-sm-line-height
),
md: (
padding-x: $kendo-button-md-padding-x,
padding-y: $kendo-button-md-padding-y,
font-size: $kendo-button-md-font-size,
line-height: $kendo-button-md-line-height
),
lg: (
padding-x: $kendo-button-lg-padding-x,
padding-y: $kendo-button-lg-padding-y,
font-size: $kendo-button-lg-font-size,
line-height: $kendo-button-lg-line-height
)
) | ||
Description
The sizes map for the Button. | |||
| $kendo-button-spacing | map.get( $kendo-spacing, 2 ) | ||
Description
The content spacing of the Button. | |||
| $kendo-button-focus-offset | map.get( $kendo-spacing, 0.5 ) | ||
Description
The offset of the focused Button. | |||
| $kendo-button-focus-outline-width | 1px | ||
Description
The Outline width of the focused Button. | |||
| $kendo-button-focus-outline-style | solid | ||
Description
The outline style of the focused Button. | |||
| $kendo-button-flat-focus-offset | 1px | ||
Description
The offset of the flat focused Button. | |||
| $kendo-button-flat-focus-outline-width | map.get( $kendo-spacing, 0.5 ) | ||
Description
The outline width of the flat focused Button. | |||
| $kendo-button-link-focus-offset | 0 | ||
Description
The offset of the link focused Button. | |||
| $kendo-button-link-focus-outline-width | 1px | ||
Description
The outline width of the flat focused Button. | |||
| $kendo-button-theme-colors | () | ||
Description
The theme colors map for the Button. | |||
