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 / 2

0.1875rem

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

$font-family

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

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

$font-size

1rem

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

$line-height

1.5

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

$padding-x

1rem

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

$kendo-fab-padding-x

1rem

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

24px

24px

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

$kendo-fab-icon-width

24px

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

k-math-div( k-map-get( $spacing, 1 ), 2 )

0.125rem

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

0px

0px

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

k-map-get( $spacing, 4 )

1rem

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

k-map-get( $spacing, 1 )

0.25rem

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

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

0.25rem

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

4px

4px

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

$font-size-xs

0.75rem

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

14px

14px

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

k-map-get( $spacing, 2 )

0.5rem

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

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

0.5rem

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

24px

24px

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

$kendo-fab-item-icon-width

24px

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

$kendo-theme-colors

("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)

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

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

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

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

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

0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 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

#212529

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

#dee2e6

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

$kendo-button-text

#212529

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

$kendo-button-bg

#e4e7eb

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

$kendo-button-border

#e4e7eb

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

$kendo-fab-shadow

0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 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

0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552), 0px 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?