kendo-button-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the Button.
|
kendo-button-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the Button.
|
kendo-button-sm-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the small Button.
|
kendo-button-md-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the medium Button.
|
kendo-button-lg-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the large Button.
|
kendo-button-sm-padding-y | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem) |
| Description: The vertical padding of the small Button.
|
kendo-button-md-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the medium Button.
|
kendo-button-lg-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the large Button.
|
kendo-button-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Button.
|
kendo-button-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal )Computed: var(--kendo-font-weight-normal, normal) |
| Description: The font weight of the Button.
|
kendo-button-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Button.
|
kendo-button-sm-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the small Button.
|
kendo-button-md-font-size | $kendo-button-font-size | var(--kendo-font-size, inherit) | Default: $kendo-button-font-sizeComputed: var(--kendo-font-size, inherit) |
| Description: The font size of the medium Button.
|
kendo-button-lg-font-size | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) | Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit) |
| Description: The font size of the large Button.
|
kendo-button-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height used along with the $kendo-font-size the.
|
kendo-button-sm-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height used along with the $kendo-font-size the of the small Button.
|
kendo-button-md-line-height | $kendo-button-line-height | var(--kendo-line-height, normal) | Default: $kendo-button-line-heightComputed: var(--kendo-line-height, normal) |
| Description: The line height used along with the $kendo-font-size the of the medium Button.
|
kendo-button-lg-line-height | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) | Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal) |
| Description: The line height used along with the $kendo-font-size the of the large Button.
|
kendo-button-sizes | | sm: | "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)" | | md: | "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)" | | lg: | "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-2, 0.5rem)","font-size":"var(--kendo-font-size-lg, inherit)","line-height":"var(--kendo-line-height-lg, normal)" |
| Computed: (sm: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-0\.5, 0.125rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), md: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-1, 0.25rem), font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal)), lg: (padding-x: var(--kendo-spacing-2, 0.5rem), padding-y: var(--kendo-spacing-2, 0.5rem), font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal))) |
| Description: The sizes map for the Button.
|
kendo-button-theme-colors | | base: | var(--kendo-color-base, #f5f5f5) | | primary: | var(--kendo-color-primary, #ff6358) | | secondary: | var(--kendo-color-secondary, #666666) | | tertiary: | var(--kendo-color-tertiary, #03a9f4) | | info: | var(--kendo-color-info, #0058e9) | | success: | var(--kendo-color-success, #37b400) | | warning: | var(--kendo-color-warning, #ffc000) | | error: | var(--kendo-color-error, #f31700) | | dark: | var(--kendo-color-dark, #3d3d3d) | | light: | var(--kendo-color-light, #ebebeb) | | inverse: | var(--kendo-color-dark, #3d3d3d) |
| Computed: ("base": var(--kendo-color-base, #f5f5f5), "primary": var(--kendo-color-primary, #ff6358), "secondary": var(--kendo-color-secondary, #666666), "tertiary": var(--kendo-color-tertiary, #03a9f4), "info": var(--kendo-color-info, #0058e9), "success": var(--kendo-color-success, #37b400), "warning": var(--kendo-color-warning, #ffc000), "error": var(--kendo-color-error, #f31700), "dark": var(--kendo-color-dark, #3d3d3d), "light": var(--kendo-color-light, #ebebeb), "inverse": var(--kendo-color-dark, #3d3d3d)) |
| Description: The theme colors map for the Button.
|
kendo-button-bg | k-color(base) | var(--kendo-color-base, #f5f5f5) | Default: k-color(base)Computed: var(--kendo-color-base, #f5f5f5) |
| Description: The base background of the Button.
|
kendo-button-text | k-color(on-base) | var(--kendo-color-on-base, #3d3d3d) | Default: k-color(on-base)Computed: var(--kendo-color-on-base, #3d3d3d) |
| Description: The base text color of the Button.
|
kendo-button-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(border)Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The base border color of the Button.
|
kendo-button-gradient | null | null | Default: nullComputed: null |
| Description: The base background gradient of the Button.
|
kendo-button-shadow | null | null | Default: nullComputed: null |
| Description: The base shadow of the Button.
|
kendo-button-hover-bg | k-color(base-hover) | var(--kendo-color-base-hover, #ebebeb) | Default: k-color(base-hover)Computed: var(--kendo-color-base-hover, #ebebeb) |
| Description: The base background of the hovered Button.
|
kendo-button-hover-text | null | null | Default: nullComputed: null |
| Description: The base text color of the hovered Button.
|
kendo-button-hover-border | null | null | Default: nullComputed: null |
| Description: The base border color of the hovered Button.
|
kendo-button-hover-gradient | null | null | Default: nullComputed: null |
| Description: The base background gradient of the hovered Button.
|
kendo-button-hover-shadow | null | null | Default: nullComputed: null |
| Description: The base shadow of the hovered Button.
|
kendo-button-active-bg | k-color(base-active) | var(--kendo-color-base-active, #d6d6d6) | Default: k-color(base-active)Computed: var(--kendo-color-base-active, #d6d6d6) |
| Description: The base background color of the active Button.
|
kendo-button-active-text | null | null | Default: nullComputed: null |
| Description: The base text color of the active Button.
|
kendo-button-active-border | null | null | Default: nullComputed: null |
| Description: The base border color of the active Button.
|
kendo-button-active-gradient | null | null | Default: nullComputed: null |
| Description: The base background gradient of the active Button.
|
kendo-button-active-shadow | null | null | Default: nullComputed: null |
| Description: The base shadow of the active Button.
|
kendo-button-selected-bg | k-color(primary) | var(--kendo-color-primary, #ff6358) | Default: k-color(primary)Computed: var(--kendo-color-primary, #ff6358) |
| Description: The base background color of the selected Button.
|
kendo-button-selected-text | k-color(on-primary) | var(--kendo-color-on-primary, #ffffff) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the selected Button.
|
kendo-button-selected-border | $kendo-button-selected-bg | var(--kendo-color-primary, #ff6358) | Default: $kendo-button-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The border color of the selected Button.
|
kendo-button-selected-gradient | $kendo-button-active-gradient | null | Default: $kendo-button-active-gradientComputed: null |
| Description: The background gradient of the selected Button.
|
kendo-button-selected-shadow | $kendo-button-active-shadow | null | Default: $kendo-button-active-shadowComputed: null |
| Description: The base shadow of the selected Button.
|
kendo-button-focus-shadow | 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) | (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) | Default: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent)Computed: (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) |
| Description: The base shadow of the focused Button.
|
kendo-button-disabled-bg | null | null | Default: nullComputed: null |
| Description: The base background of the disabled Button.
|
kendo-button-disabled-text | null | null | Default: nullComputed: null |
| Description: The base text color of the disabled Button.
|
kendo-button-disabled-border | null | null | Default: nullComputed: null |
| Description: The base border color of the disabled Button.
|
kendo-button-disabled-gradient | null | null | Default: nullComputed: null |
| Description: The base background gradient of the disabled Button.
|
kendo-button-disabled-shadow | null | null | Default: nullComputed: null |
| Description: The base shadow of the disabled Button.
|
kendo-button-pulsing-opacity | .4 | 0.4 | Default: .4Computed: 0.4 |
| Description: The opacity of the pulsing animation for the generating Button.
|
kendo-solid-button-gradient | null | null | Default: nullComputed: null |
| Description: The button gradient of the Button.
|
kendo-solid-button-shadow | true | true | Default: trueComputed: true |
| Description: The shadow of the Button.
|
kendo-solid-button-shadow-blur | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The button shadow blur of the Button.
|
kendo-solid-button-shadow-spread | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The button shadow spread of the Button.
|
kendo-solid-button-shadow-opacity | .3 | 0.3 | Default: .3Computed: 0.3 |
| Description: The button shadow opacity of the Button.
|
kendo-outline-button-shadow | true | true | Default: trueComputed: true |
| Description: The shadow of the Button.
|
kendo-outline-button-shadow-blur | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The button shadow blur of the Button.
|
kendo-outline-button-shadow-spread | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The button shadow spread of the Button.
|
kendo-outline-button-shadow-opacity | .3 | 0.3 | Default: .3Computed: 0.3 |
| Description: The button shadow opacity of the Button.
|
kendo-link-button-shadow | true | true | Default: trueComputed: true |
| Description: The shadow of the Button.
|
kendo-link-button-shadow-blur | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The button shadow blur of the Button.
|
kendo-link-button-shadow-spread | 2px | 2px | Default: 2pxComputed: 2px |
| Description: The button shadow spread of the Button.
|
kendo-link-button-shadow-opacity | .3 | 0.3 | Default: .3Computed: 0.3 |
| Description: The button shadow opacity of the Button.
|
kendo-clear-button-focus-opacity | .1 | 0.1 | Default: .1Computed: 0.1 |
| Description: The button focus opacity of the Button.
|
kendo-flat-button-hover-opacity | .08 | 0.08 | Default: .08Computed: 0.08 |
| Description: The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
|
kendo-flat-button-focus-opacity | null | null | Default: nullComputed: null |
| Description: The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
|
kendo-flat-button-active-opacity | .16 | 0.16 | Default: .16Computed: 0.16 |
| Description: The overlay opacity of the active flat Button. Used to create background for the flat Button.
|
kendo-flat-button-selected-opacity | .2 | 0.2 | Default: .2Computed: 0.2 |
| Description: The overlay opacity of the selected flat Button. Used to create background for the flat Button.
|
kendo-flat-button-focus-ring-opacity | .12 | 0.12 | Default: .12Computed: 0.12 |
| Description: The opacity of the flat Button focus ring. Used to create a border for the flat Button.
|
kendo-button-transition | color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid) | (color var(--kendo-transition-rapid), background-color var(--kendo-transition-rapid), border-color var(--kendo-transition-rapid), box-shadow var(--kendo-transition-rapid), opacity var(--kendo-transition-rapid)) | Default: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid)Computed: (color var(--kendo-transition-rapid), background-color var(--kendo-transition-rapid), border-color var(--kendo-transition-rapid), box-shadow var(--kendo-transition-rapid), opacity var(--kendo-transition-rapid)) |
| Description: The transition of the Button.
|
