New to Kendo UI for Vue? 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

1px

1px

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

$kendo-border-radius / 2

0.125rem

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

$font-family

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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

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

map-get( $spacing, 4 )

1rem

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

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

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(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .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 try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .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?