New to Kendo UI for Angular? Start a free 30-day trial
Customizing Floating-action-button
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-fab-border-width | Number | 1px | 1px |
Description
The width of the border around the FAB. | |||
| $kendo-fab-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) |
Description
The border radius of the FAB. | |||
| $kendo-fab-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the FAB. | |||
| $kendo-fab-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the FAB. | |||
| $kendo-fab-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the FAB. | |||
| $kendo-fab-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the FAB. | |||
| $kendo-fab-sm-padding-x | Calculation | calc( #{$kendo-fab-padding-x} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The horizontal padding of the small FAB. | |||
| $kendo-fab-md-padding-x | String | $kendo-fab-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the medium FAB. | |||
| $kendo-fab-lg-padding-x | Calculation | calc( #{$kendo-fab-padding-x} * 1.5 ) | calc(var(--kendo-spacing-4, 1rem) * 1.5) |
Description
The horizontal padding of the large FAB. | |||
| $kendo-fab-padding-y | String | $kendo-fab-padding-x | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the FAB. | |||
| $kendo-fab-sm-padding-y | Calculation | calc( #{$kendo-fab-padding-y} / 2 ) | calc(var(--kendo-spacing-4, 1rem) / 2) |
Description
The vertical padding of the small FAB. | |||
| $kendo-fab-md-padding-y | String | $kendo-fab-padding-y | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the medium FAB. | |||
| $kendo-fab-lg-padding-y | Calculation | calc( #{$kendo-fab-padding-y} * 1.5 ) | calc(var(--kendo-spacing-4, 1rem) * 1.5) |
Description
The vertical padding of the large FAB. | |||
| $kendo-fab-focus-offset | String | $kendo-button-focus-offset | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The offset of the focused FAB. | |||
| $kendo-fab-focus-outline-width | Number | $kendo-button-focus-outline-width | 1px |
Description
The outline width of the focused FAB. | |||
| $kendo-fab-focus-outline-style | String | $kendo-button-focus-outline-style | solid |
Description
The outline style of the focused FAB. | |||
| $kendo-fab-icon-padding-x | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The horizontal padding of the FAB icon. | |||
| $kendo-fab-icon-padding-y | String | $kendo-fab-icon-padding-x | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the FAB icon. | |||
| $kendo-fab-icon-spacing | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The spacing of the FAB icon. | |||
| $kendo-fab-items-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the FAB items. | |||
| $kendo-fab-items-padding-y | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The vertical padding of the FAB items. | |||
| $kendo-fab-item-text-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the FAB item text. | |||
| $kendo-fab-item-text-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the FAB item text. | |||
| $kendo-fab-item-text-border-width | Number | 1px | 1px |
Description
The width of the FAB item text border. | |||
| $kendo-fab-item-text-border-style | String | solid | solid |
Description
The border style of the FAB item text. | |||
| $kendo-fab-item-text-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) |
Description
The border radius of the FAB item text. | |||
| $kendo-fab-item-text-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the FAB item text. | |||
| $kendo-fab-item-text-line-height | String | var( --kendo-line-height-sm, inherit ) | var(--kendo-line-height-sm, inherit) |
Description
The line height of the FAB item text. | |||
| $kendo-fab-item-text-offset-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The bottom margin of the FAB item text. | |||
| $kendo-fab-item-focus-offset | String | $kendo-button-focus-offset | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The offset of the focused FAB item. | |||
| $kendo-fab-item-focus-outline-width | Number | $kendo-button-focus-outline-width | 1px |
Description
The outline width of the focused FAB item. | |||
| $kendo-fab-item-focus-outline-style | String | $kendo-button-focus-outline-style | solid |
Description
The outline style of the focused FAB item. | |||
| $kendo-fab-item-icon-padding-x | Calculation | calc( #{k-spacing(2)} + $kendo-fab-icon-padding-x ) | calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem)) |
Description
The horizontal padding of the FAB item icon. | |||
| $kendo-fab-item-icon-padding-y | Calculation | $kendo-fab-item-icon-padding-x | calc(var(--kendo-spacing-2, 0.5rem) + var(--kendo-spacing-0\.5, 0.125rem)) |
Description
The vertical padding of the FAB item icon. | |||
| $kendo-fab-item-icon-border-width | Number | 1px | 1px |
Description
The border width of the FAB item icon. | |||
| $kendo-fab-item-icon-border-style | String | solid | solid |
Description
The border style of the FAB item icon. | |||
| $kendo-fab-item-icon-border-radius | Number | 50% | 50% |
Description
The border radius of the FAB item icon. | |||
| $kendo-fab-theme-colors | Map | (
solid: map.get( $kendo-button-theme-colors, "solid")
) | (solid: (base: (bg: var(--kendo-color-base, #ffffff), text: var(--kendo-color-on-base, #323130), border: var(--kendo-color-border, #8a8886), hover-bg: var(--kendo-color-base-hover, #f3f2f1), hover-text: var(--kendo-color-on-base, #323130), hover-border: var(--kendo-color-border, #8a8886), focus-bg: var(--kendo-color-base, #ffffff), focus-text: var(--kendo-color-on-base, #323130), focus-border: var(--kendo-color-border, #8a8886), focus-outline: var(--kendo-color-on-base, #323130), focus-hover-bg: var(--kendo-color-base-hover, #f3f2f1), focus-hover-text: var(--kendo-color-on-base, #323130), focus-hover-border: var(--kendo-color-border, #8a8886), focus-hover-outline: var(--kendo-color-on-base, #323130), active-bg: var(--kendo-color-base-active, #edebe9), active-text: var(--kendo-color-on-base, #323130), active-border: var(--kendo-color-border, #8a8886), active-hover-bg: var(--kendo-color-base-hover, #f3f2f1), active-hover-text: var(--kendo-color-on-base, #323130), active-hover-border: var(--kendo-color-border, #8a8886), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4), hover-bg: var(--kendo-color-primary-hover, #106ebe), hover-text: var(--kendo-color-on-primary, #ffffff), hover-border: var(--kendo-color-primary-hover, #106ebe), focus-bg: var(--kendo-color-primary, #0078d4), focus-text: var(--kendo-color-on-primary, #ffffff), focus-border: var(--kendo-color-primary, #0078d4), focus-outline: inherit, focus-hover-bg: var(--kendo-color-primary-hover, #106ebe), focus-hover-text: var(--kendo-color-on-primary, #ffffff), focus-hover-border: var(--kendo-color-primary-hover, #106ebe), focus-hover-outline: inherit, active-bg: var(--kendo-color-primary-active, #005a9e), active-text: var(--kendo-color-on-primary, #ffffff), active-border: var(--kendo-color-primary-active, #005a9e), active-hover-bg: var(--kendo-color-primary-hover, #106ebe), active-hover-text: var(--kendo-color-on-primary, #ffffff), active-hover-border: var(--kendo-color-primary-hover, #106ebe), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b), hover-bg: var(--kendo-color-error-hover, #b85156), hover-text: var(--kendo-color-on-error, #ffffff), hover-border: var(--kendo-color-error-hover, #b85156), focus-bg: var(--kendo-color-error, #c2666b), focus-text: var(--kendo-color-on-error, #ffffff), focus-border: var(--kendo-color-error, #c2666b), focus-outline: inherit, focus-hover-bg: var(--kendo-color-error-hover, #b85156), focus-hover-text: var(--kendo-color-on-error, #ffffff), focus-hover-border: var(--kendo-color-error-hover, #b85156), focus-hover-outline: inherit, active-bg: var(--kendo-color-error-active, #ae3b41), active-text: var(--kendo-color-on-error, #ffffff), active-border: var(--kendo-color-error-active, #ae3b41), active-hover-bg: var(--kendo-color-error-hover, #b85156), active-hover-text: var(--kendo-color-on-error, #ffffff), active-hover-border: var(--kendo-color-error-hover, #b85156), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554), hover-bg: var(--kendo-color-success-hover, #3e973e), hover-text: var(--kendo-color-on-success, #ffffff), hover-border: var(--kendo-color-success-hover, #3e973e), focus-bg: var(--kendo-color-success, #55a554), focus-text: var(--kendo-color-on-success, #ffffff), focus-border: var(--kendo-color-success, #55a554), focus-outline: inherit, focus-hover-bg: var(--kendo-color-success-hover, #3e973e), focus-hover-text: var(--kendo-color-on-success, #ffffff), focus-hover-border: var(--kendo-color-success-hover, #3e973e), focus-hover-outline: inherit, active-bg: var(--kendo-color-success-active, #278a27), active-text: var(--kendo-color-on-success, #ffffff), active-border: var(--kendo-color-success-active, #278a27), active-hover-bg: var(--kendo-color-success-hover, #3e973e), active-hover-text: var(--kendo-color-on-success, #ffffff), active-hover-border: var(--kendo-color-success-hover, #3e973e), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff), hover-bg: var(--kendo-color-info-hover, #096edf), hover-text: var(--kendo-color-on-info, #ffffff), hover-border: var(--kendo-color-info-hover, #096edf), focus-bg: var(--kendo-color-info, #0a7eff), focus-text: var(--kendo-color-on-info, #ffffff), focus-border: var(--kendo-color-info, #0a7eff), focus-outline: inherit, focus-hover-bg: var(--kendo-color-info-hover, #096edf), focus-hover-text: var(--kendo-color-on-info, #ffffff), focus-hover-border: var(--kendo-color-info-hover, #096edf), focus-hover-outline: inherit, active-bg: var(--kendo-color-info-active, #085ebf), active-text: var(--kendo-color-on-info, #ffffff), active-border: var(--kendo-color-info-active, #085ebf), active-hover-bg: var(--kendo-color-info-hover, #096edf), active-hover-text: var(--kendo-color-on-info, #ffffff), active-hover-border: var(--kendo-color-info-hover, #096edf), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593), hover-bg: var(--kendo-color-secondary-hover, #8a8886), hover-text: var(--kendo-color-on-secondary, #ffffff), hover-border: var(--kendo-color-secondary-hover, #8a8886), focus-bg: var(--kendo-color-secondary, #979593), focus-text: var(--kendo-color-on-secondary, #ffffff), focus-border: var(--kendo-color-secondary, #979593), focus-outline: inherit, focus-hover-bg: var(--kendo-color-secondary-hover, #8a8886), focus-hover-text: var(--kendo-color-on-secondary, #ffffff), focus-hover-border: var(--kendo-color-secondary-hover, #8a8886), focus-hover-outline: inherit, active-bg: var(--kendo-color-secondary-active, #797775), active-text: var(--kendo-color-on-secondary, #ffffff), active-border: var(--kendo-color-secondary-active, #797775), active-hover-bg: var(--kendo-color-secondary-hover, #8a8886), active-hover-text: var(--kendo-color-on-secondary, #ffffff), active-hover-border: var(--kendo-color-secondary-hover, #8a8886), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8), hover-bg: var(--kendo-color-tertiary-hover, #287ec7), hover-text: var(--kendo-color-on-tertiary, #ffffff), hover-border: var(--kendo-color-tertiary-hover, #287ec7), focus-bg: var(--kendo-color-tertiary, #2b88d8), focus-text: var(--kendo-color-on-tertiary, #ffffff), focus-border: var(--kendo-color-tertiary, #2b88d8), focus-outline: inherit, focus-hover-bg: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-text: var(--kendo-color-on-tertiary, #ffffff), focus-hover-border: var(--kendo-color-tertiary-hover, #287ec7), focus-hover-outline: inherit, active-bg: var(--kendo-color-tertiary-active, #2473b7), active-text: var(--kendo-color-on-tertiary, #ffffff), active-border: var(--kendo-color-tertiary-active, #2473b7), active-hover-bg: var(--kendo-color-tertiary-hover, #287ec7), active-hover-text: var(--kendo-color-on-tertiary, #ffffff), active-hover-border: var(--kendo-color-tertiary-hover, #287ec7), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a), hover-bg: var(--kendo-color-warning-hover, #f5c000), hover-text: var(--kendo-color-on-warning, #323130), hover-border: var(--kendo-color-warning-hover, #f5c000), focus-bg: var(--kendo-color-warning, #ffc80a), focus-text: var(--kendo-color-on-warning, #323130), focus-border: var(--kendo-color-warning, #ffc80a), focus-outline: var(--kendo-color-app-surface, #ffffff), focus-hover-bg: var(--kendo-color-warning-hover, #f5c000), focus-hover-text: var(--kendo-color-on-warning, #323130), focus-hover-border: var(--kendo-color-warning-hover, #f5c000), focus-hover-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-warning-active, #e0b000), active-text: var(--kendo-color-on-warning, #323130), active-border: var(--kendo-color-warning-active, #e0b000), active-hover-bg: var(--kendo-color-warning-hover, #f5c000), active-hover-text: var(--kendo-color-on-warning, #323130), active-hover-border: var(--kendo-color-warning-hover, #f5c000), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130), hover-bg: var(--kendo-color-dark-hover, #201f1e), hover-text: var(--kendo-color-on-dark, #ffffff), hover-border: var(--kendo-color-dark-hover, #201f1e), focus-bg: var(--kendo-color-dark, #323130), focus-text: var(--kendo-color-on-dark, #ffffff), focus-border: var(--kendo-color-dark, #323130), focus-outline: var(--kendo-color-on-dark, #ffffff), focus-hover-bg: var(--kendo-color-dark-hover, #201f1e), focus-hover-text: var(--kendo-color-on-dark, #ffffff), focus-hover-border: var(--kendo-color-dark-hover, #201f1e), focus-hover-outline: var(--kendo-color-on-dark, #ffffff), active-bg: var(--kendo-color-dark-active, #000000), active-text: var(--kendo-color-on-dark, #ffffff), active-border: var(--kendo-color-dark-active, #000000), active-hover-bg: var(--kendo-color-dark-hover, #201f1e), active-hover-text: var(--kendo-color-on-dark, #ffffff), active-hover-border: var(--kendo-color-dark-hover, #201f1e), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce), hover-bg: var(--kendo-color-light-hover, #c8c6c4), hover-text: var(--kendo-color-on-light, #323130), hover-border: var(--kendo-color-light-hover, #c8c6c4), focus-bg: var(--kendo-color-light, #d2d0ce), focus-text: var(--kendo-color-on-light, #323130), focus-border: var(--kendo-color-light, #d2d0ce), focus-outline: var(--kendo-color-app-surface, #ffffff), focus-hover-bg: var(--kendo-color-light-hover, #c8c6c4), focus-hover-text: var(--kendo-color-on-light, #323130), focus-hover-border: var(--kendo-color-light-hover, #c8c6c4), focus-hover-outline: var(--kendo-color-app-surface, #ffffff), active-bg: var(--kendo-color-light-active, #a19f9d), active-text: var(--kendo-color-on-light, #323130), active-border: var(--kendo-color-light-active, #a19f9d), active-hover-bg: var(--kendo-color-light-hover, #c8c6c4), active-hover-text: var(--kendo-color-on-light, #323130), active-hover-border: var(--kendo-color-light-hover, #c8c6c4), disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent), disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent), disabled-border: transparent))) |
Description
The theme colors map for the FAB. | |||
| $kendo-fab-sizes | Map | (
sm: (
padding-x: $kendo-fab-sm-padding-x,
padding-y: $kendo-fab-sm-padding-y
),
md: (
padding-x: $kendo-fab-md-padding-x,
padding-y: $kendo-fab-md-padding-y
),
lg: (
padding-x: $kendo-fab-lg-padding-x,
padding-y: $kendo-fab-lg-padding-y
)
) | (sm: (padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: calc(var(--kendo-spacing-4, 1rem) / 2)), md: (padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)), lg: (padding-x: calc(var(--kendo-spacing-4, 1rem) * 1.5), padding-y: calc(var(--kendo-spacing-4, 1rem) * 1.5))) |
Description
The size map for the FAB. | |||
| $kendo-fab-item-offset-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The bottom margin of the FAB item. | |||
| $kendo-fab-item-text | String | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | var(--kendo-color-on-app-surface, #323130) |
Description
The base text color of the FAB item. | |||
| $kendo-fab-item-bg | String | var( --kendo-component-bg, inherit ) | var(--kendo-component-bg, inherit) |
Description
The base background color of the FAB item. | |||
| $kendo-fab-item-border | String | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | var(--kendo-color-border, #8a8886) |
Description
The base border color of the FAB item. | |||
| $kendo-fab-item-hover-text | String | var( --kendo-hover-text, inherit ) | var(--kendo-hover-text, inherit) |
Description
The text color of the hovered FAB item. | |||
| $kendo-fab-item-hover-bg | String | var( --kendo-hover-bg, inherit ) | var(--kendo-hover-bg, inherit) |
Description
The background color of the hovered FAB item. | |||
| $kendo-fab-item-hover-border | String | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | var(--kendo-color-border, #8a8886) |
Description
The border color of the hovered FAB item. | |||
| $kendo-fab-item-focus-text | String | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the focused FAB item. | |||
| $kendo-fab-item-focus-bg | String | var( --kendo-component-bg, inherit ) | var(--kendo-component-bg, inherit) |
Description
The background color of the focused FAB item. | |||
| $kendo-fab-item-focus-border | String | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | var(--kendo-color-border, #8a8886) |
Description
The border color of the focused FAB item. | |||
| $kendo-fab-item-active-text | String | var( --kendo-selected-text, inherit ) | var(--kendo-selected-text, inherit) |
Description
The text color of the active FAB item. | |||
| $kendo-fab-item-active-bg | String | var( --kendo-selected-bg, inherit ) | var(--kendo-selected-bg, inherit) |
Description
The background color of the active FAB item. | |||
| $kendo-fab-item-active-border | String | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | var(--kendo-color-border, #8a8886) |
Description
The border color of the active FAB item. | |||
