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

Customizing FloatingActionButton

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber0px0px
Description
The width of the border around the FAB.
$kendo-fab-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the FAB.
$kendo-fab-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the FAB.
$kendo-fab-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the FAB.
$kendo-fab-line-heightNumberk-math-div( 20, 14 )1.4285714286
Description
The line height of the FAB.
$kendo-fab-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the FAB.
$kendo-fab-sm-padding-xCalculationcalc( #{$kendo-fab-padding-x} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The horizontal padding of the small FAB.
$kendo-fab-md-padding-xString$kendo-fab-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-xCalculationcalc( #{$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-yString$kendo-fab-padding-xvar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the FAB.
$kendo-fab-sm-padding-yCalculationcalc( #{$kendo-fab-padding-y} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical padding of the small FAB.
$kendo-fab-md-padding-yString$kendo-fab-padding-yvar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the medium FAB.
$kendo-fab-lg-padding-yCalculationcalc( #{$kendo-fab-padding-y} * 1.5 )calc(var(--kendo-spacing-4, 1rem) * 1.5)
Description
The vertical padding of the large FAB.
$kendo-fab-icon-padding-xStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-yString$kendo-fab-icon-padding-xvar(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the FAB icon.
$kendo-fab-icon-spacingCalculationcalc( #{k-spacing(1)} * 1.5 )calc(var(--kendo-spacing-1, 0.25rem) * 1.5)
Description
The spacing FAB icon.
$kendo-fab-items-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the FAB items.
$kendo-fab-items-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the FAB items.
$kendo-fab-item-text-padding-xStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-yString$kendo-fab-item-text-padding-xvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the FAB item text.
$kendo-fab-item-text-border-widthNumber1px1px
Description
The width of the FAB item text border.
$kendo-fab-item-text-border-radiusNumber2px2px
Description
The border radius of the FAB item text.
$kendo-fab-item-text-font-sizeStringvar( --kendo-font-size-xs, inherit )var(--kendo-font-size-xs, inherit)
Description
The font size of the FAB item text.
$kendo-fab-item-text-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the FAB item text.
$kendo-fab-item-icon-padding-xCalculationcalc( #{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-yCalculation$kendo-fab-item-icon-padding-xcalc(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-widthNumber00
Description
The border width of the FAB item icon.
$kendo-fab-item-icon-border-radiusNumber50%50%
Description
The border radius of the FAB item icon.
$kendo-fab-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #3f51b5)
  • secondary: var(--kendo-color-secondary, #e51a5f)
  • tertiary: var(--kendo-color-tertiary, #00695c)
  • 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, #424242)
  • light: var(--kendo-color-light, #f5f5f5)
  • inverse: var(--kendo-color-dark, #424242)
Description
The theme colors map for the FAB.
$kendo-fab-sizesMap( 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-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowString$box-shadow-depth-5var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the disabled FAB.
$kendo-fab-active-shadowString$box-shadow-depth-7var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the active FAB.
$kendo-fab-item-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The base text color of the FAB item.
$kendo-fab-item-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The base background color of the FAB item.
$kendo-fab-item-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The base border color of the FAB item.
$kendo-fab-item-icon-textString$kendo-button-textvar(--kendo-color-on-base, #212121)
Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bgString$kendo-button-bgvar(--kendo-color-base, #ffffff)
Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-borderString$kendo-button-bordervar(--kendo-color-base, #ffffff)
Description
The base border color of the FAB item icon.
$kendo-fab-item-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the disabled FAB item.
$kendo-fab-item-active-shadowString$kendo-fab-active-shadowvar(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))
Description
The shadow of the active FAB item.

In this article

Not finding the help you need?