Customizing Floating-action-button

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber

1px

1px

Description
Width of the border around the FAB.
$kendo-fab-border-radiusNumber

$kendo-border-radius-md

4px

Description
Border radius of the FAB.
$kendo-fab-font-familyString

$font-family

inherit

Description
Font family of the FAB.
$kendo-fab-font-sizeNumber

$font-size

14px

Description
Font size of the FAB.
$kendo-fab-line-heightNumber

$line-height

1.4285714286

Description
Line height of the FAB.
$kendo-fab-padding-xNumber

map-get( $spacing, 4 )

16px

Description
Horizontal padding of the FAB.
$kendo-fab-padding-yNumber

$kendo-fab-padding-x

16px

Description
Vertical padding of the FAB.
$kendo-fab-icon-widthNumber

20px

20px

Description
FAB icon width.
$kendo-fab-icon-heightNumber

$kendo-fab-icon-width

20px

Description
FAB icon height.
$kendo-fab-icon-spacingNumber

map-get( $spacing, 1 ) / 2

2px

Description
FAB icon spacing.
$kendo-fab-items-padding-xNumber

0px

0px

Description
FAB items horizontal padding.
$kendo-fab-items-padding-yNumber

map-get( $spacing, 4 )

16px

Description
FAB items vertical padding.
$kendo-fab-item-text-padding-xNumber

map-get( $spacing, 1 )

4px

Description
FAB item text horizontal padding.
$kendo-fab-item-text-padding-yNumber

$kendo-fab-item-text-padding-x

4px

Description
FAB item text vertical padding.
$kendo-fab-item-text-border-widthNumber

1px

1px

Description
Width of the FAB item text border.
$kendo-fab-item-text-border-radiusNumber

2px

2px

Description
Border radius of the FAB item text.
$kendo-fab-item-text-font-sizeNumber

$font-size-xs

10px

Description
Font size of the FAB item text.
$kendo-fab-item-text-line-heightNumber

1.2

1.2

Description
Line height of the FAB item text.
$kendo-fab-item-icon-padding-xNumber

map-get( $spacing, 2 )

8px

Description
FAB item icon horizontal padding.
$kendo-fab-item-icon-padding-yNumber

$kendo-fab-item-icon-padding-x

8px

Description
FAB item icon vertical padding.
$kendo-fab-item-icon-border-widthNumber

0

0

Description
Width of the FAB item icon border.
$kendo-fab-item-icon-border-radiusNumber

50%

50%

Description
Border radius of the FAB item icon.
$kendo-fab-item-icon-widthNumber

20px

20px

Description
Width of the FAB item icon.
$kendo-fab-item-icon-heightNumber

$kendo-fab-item-icon-width

20px

Description
Height of the FAB item icon.
$kendo-fab-theme-colorsMap

$kendo-theme-colors

("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242)

Description
Theme colors map for the FAB.
$kendo-fab-shadowList

0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)

0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)

Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowList

0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 )

0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)

Description
The disabled shadow of the FAB.
$kendo-fab-active-shadowNull

null

null

Description
The active shadow of the FAB.
$kendo-fab-item-textColor

$component-text

#424242

Description
The base text color of the FAB item.
$kendo-fab-item-bgColor

$component-bg

#ffffff

Description
The base background color of the FAB item.
$kendo-fab-item-borderColor

$component-border

rgba(0, 0, 0, 0.08)

Description
The base border color of the FAB item.
$kendo-fab-item-icon-textColor

$kendo-button-text

#424242

Description
The base text color of the FAB item icon.
$kendo-fab-item-icon-bgColor

$kendo-button-bg

#f5f5f5

Description
The base background color of the FAB item icon.
$kendo-fab-item-icon-borderColor

$kendo-button-border

rgba(0, 0, 0, 0.08)

Description
The base border color of the FAB item icon.
$kendo-fab-item-shadowList

$kendo-fab-shadow

0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)

Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowList

$kendo-fab-disabled-shadow

0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)

Description
The disabled shadow of the FAB item.
$kendo-fab-item-active-shadowNull

$kendo-fab-active-shadow

null

Description
The active shadow of the FAB item.

In this article

Not finding the help you need?