Customizing Floating-action-button

The following table lists the available variables for customization.

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	`k-math-div( $kendo-border-radius, 2 )`	`0.1875rem`
Description Border radius of the FAB.
$kendo-fab-font-family	List	`$kendo-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-size	Number	`$kendo-font-size-md`	`1rem`
Description Font size of the FAB.
$kendo-fab-line-height	Number	`$kendo-line-height-md`	`1.5`
Description Line height of the FAB.
$kendo-fab-padding-x	Number	`k-map-get( $kendo-spacing, 4 )`	`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	`k-map-get( $kendo-spacing, 0.5 )`	`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	`k-map-get( $kendo-spacing, 4 )`	`1rem`
Description FAB items vertical padding.
$kendo-fab-item-text-padding-x	Number	`k-map-get( $kendo-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	`$kendo-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	`k-map-get( $kendo-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( 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-shadow	List	`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-shadow	Null	`null`	`null`
Description The active shadow of the FAB.
$kendo-fab-item-text	Color	`$kendo-component-text`	`#212529`
Description The base text color of the FAB item.
$kendo-fab-item-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background color of the FAB item.
$kendo-fab-item-border	Color	`$kendo-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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Customizing Floating-action-button

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!