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

Customizing Floating-action-button

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber

0px

0px

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-familyList

$font-family

Roboto, "Helvetica Neue", sans-serif

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

$font-size

14px

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

(20 / 14)

1.4285714286

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

$padding-x

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 ) * 1.5

6px

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": #3f51b5, "secondary": #e51a5f, "tertiary": #00695c, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #f5f5f5, "inverse": #424242)

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

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

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

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

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

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

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

0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)

0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)

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

$component-text

rgba(0, 0, 0, 0.87)

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

$component-bg

white

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

$component-border

rgba(0, 0, 0, 0.12)

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

$kendo-button-text

rgba(0, 0, 0, 0.87)

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

$kendo-button-bg

white

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

$kendo-button-border

white

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

$kendo-fab-shadow

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

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

$kendo-fab-disabled-shadow

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

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

$kendo-fab-active-shadow

0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)

Description
The active shadow of the FAB item.

In this article

Not finding the help you need?