Name	Type	Default value	Computed value
$kendo-fab-border-width	Number	`1px`	`1px`
Description Width of the border around the FAB.
$kendo-fab-border-radius	Number	`$kendo-border-radius / 2`	`0.125rem`
Description Border radius of the FAB.
$kendo-fab-font-family	List	`$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-size	Number	`$font-size`	`1rem`
Description Font size of the FAB.
$kendo-fab-line-height	Number	`$line-height`	`1.5`
Description Line height of the FAB.
$kendo-fab-padding-x	Number	`$padding-x`	`1rem`
Description Horizontal padding of the FAB.
$kendo-fab-padding-y	Number	`$kendo-fab-padding-x`	`1rem`
Description Vertical padding of the FAB.
$kendo-fab-icon-width	Number	`24px`	`24px`
Description FAB icon width.
$kendo-fab-icon-height	Number	`$kendo-fab-icon-width`	`24px`
Description FAB icon height.
$kendo-fab-icon-spacing	Number	`map-get( $spacing, 1 ) / 2`	`0.125rem`
Description FAB icon spacing.
$kendo-fab-items-padding-x	Number	`0px`	`0px`
Description FAB items horizontal padding.
$kendo-fab-items-padding-y	Number	`map-get( $spacing, 4 )`	`1rem`
Description FAB items vertical padding.
$kendo-fab-item-text-padding-x	Number	`map-get( $spacing, 1 )`	`0.25rem`
Description FAB item text horizontal padding.
$kendo-fab-item-text-padding-y	Number	`$kendo-fab-item-text-padding-x`	`0.25rem`
Description FAB item text vertical padding.
$kendo-fab-item-text-border-width	Number	`1px`	`1px`
Description Width of the FAB item text border.
$kendo-fab-item-text-border-radius	Number	`4px`	`4px`
Description Border radius of the FAB item text.
$kendo-fab-item-text-font-size	Number	`$font-size-xs`	`0.75rem`
Description Font size of the FAB item text.
$kendo-fab-item-text-line-height	Number	`14px`	`14px`
Description Line height of the FAB item text.
$kendo-fab-item-icon-padding-x	Number	`map-get( $spacing, 2 )`	`0.5rem`
Description FAB item icon horizontal padding.
$kendo-fab-item-icon-padding-y	Number	`$kendo-fab-item-icon-padding-x`	`0.5rem`
Description FAB item icon vertical padding.
$kendo-fab-item-icon-border-width	Number	`0`	`0`
Description Width of the FAB item icon border.
$kendo-fab-item-icon-border-radius	Number	`50%`	`50%`
Description Border radius of the FAB item icon.
$kendo-fab-item-icon-width	Number	`24px`	`24px`
Description Width of the FAB item icon.
$kendo-fab-item-icon-height	Number	`$kendo-fab-item-icon-width`	`24px`
Description height of the FAB item icon.
$kendo-fab-theme-colors	Map	`$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-shadow	List	`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-shadow	List	`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-shadow	Null	`null`	`null`
Description The active shadow of the FAB.
$kendo-fab-item-text	Color	`$component-text`	`#212529`
Description The base text color of the FAB item.
$kendo-fab-item-bg	Color	`$component-bg`	`#ffffff`
Description The base background color of the FAB item.
$kendo-fab-item-border	Color	`$component-border`	`#dee2e6`
Description The base border color of the FAB item.
$kendo-fab-item-icon-text	Color	`$kendo-button-text`	`#212529`
Description The base text color of the FAB item icon.
$kendo-fab-item-icon-bg	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base background color of the FAB item icon.
$kendo-fab-item-icon-border	Color	`$kendo-button-border`	`#e4e7eb`
Description The base border color of the FAB item icon.
$kendo-fab-item-shadow	List	`$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-shadow	List	`$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-shadow	Null	`$kendo-fab-active-shadow`	`null`
Description The active shadow of the FAB item.

Customizing Floating-action-button

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community