Customizing Floating-action-button

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-fab-border-widthNumber1px1px
Description
The width of the border around the FAB.
$kendo-fab-border-radiusNumberk-math-div( $kendo-border-radius, 2 )0.1875rem
Description
The border radius of the FAB.
$kendo-fab-font-familyList$kendo-font-familysystem-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
The font family of the FAB.
$kendo-fab-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the FAB.
$kendo-fab-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the FAB.
$kendo-fab-padding-xNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The horizontal padding of the FAB.
$kendo-fab-sm-padding-xNumberk-math-div( $kendo-fab-padding-x, 2 )0.5rem
Description
The horizontal padding of the small FAB.
$kendo-fab-md-padding-xNumber$kendo-fab-padding-x1rem
Description
The horizontal padding of the medium FAB.
$kendo-fab-lg-padding-xNumber( $kendo-fab-padding-x * 1.5 )1.5rem
Description
The horizontal padding of the large FAB.
$kendo-fab-padding-yNumber$kendo-fab-padding-x1rem
Description
The vertical padding of the FAB.
$kendo-fab-sm-padding-yNumberk-math-div( $kendo-fab-padding-y, 2 )0.5rem
Description
The vertical padding of the small FAB.
$kendo-fab-md-padding-yNumber$kendo-fab-padding-y1rem
Description
The vertical padding of the medium FAB.
$kendo-fab-lg-padding-yNumber( $kendo-fab-padding-y * 1.5 )1.5rem
Description
The vertical padding of the large FAB.
$kendo-fab-icon-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the FAB icon.
$kendo-fab-icon-padding-yNumber$kendo-fab-icon-padding-x0.25rem
Description
The vertical padding of the FAB icon.
$kendo-fab-icon-spacingNumberk-map-get( $kendo-spacing, 0.5 )0.125rem
Description
The spacing of the FAB icon.
$kendo-fab-items-padding-xNumber0px0px
Description
The horizontal padding of the FAB items.
$kendo-fab-items-padding-yNumberk-map-get( $kendo-spacing, 4 )1rem
Description
The vertical padding of the FAB items.
$kendo-fab-item-text-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the FAB item text.
$kendo-fab-item-text-padding-yNumber$kendo-fab-item-text-padding-x0.25rem
Description
The vertical padding of the FAB item text.
$kendo-fab-item-text-border-widthNumber1px1px
Description
The width of the FAB item text border.
$kendo-fab-item-text-border-radiusNumber4px4px
Description
The border radius of the FAB item text.
$kendo-fab-item-text-font-sizeNumber$kendo-font-size-xs0.75rem
Description
The font size of the FAB item text.
$kendo-fab-item-text-line-heightNumber14px14px
Description
The line height of the FAB item text.
$kendo-fab-item-icon-padding-xNumberk-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x0.75rem
Description
The horizontal padding of the FAB item icon.
$kendo-fab-item-icon-padding-yNumber$kendo-fab-item-icon-padding-x0.75rem
Description
The vertical padding of the FAB item icon.
$kendo-fab-item-icon-border-widthNumber00
Description
The width of the FAB item icon border.
$kendo-fab-item-icon-border-radiusNumber50%50%
Description
The border radius 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
The theme colors map for the FAB.
$kendo-fab-sizesMap( sm: ( padding-x: $kendo-fab-sm-padding-x, padding-y: $kendo-fab-sm-padding-y ), md: ( padding-x: $kendo-fab-md-padding-x, padding-y: $kendo-fab-md-padding-y ), lg: ( padding-x: $kendo-fab-lg-padding-x, padding-y: $kendo-fab-lg-padding-y ) )(sm: (padding-x: 0.5rem, padding-y: 0.5rem), md: (padding-x: 1rem, padding-y: 1rem), lg: (padding-x: 1.5rem, padding-y: 1.5rem))
Description
The size map for the FAB.
$kendo-fab-shadowStringk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The base shadow of the FAB.
$kendo-fab-disabled-shadowStringk-elevation(5)var(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The shadow of the disabled FAB.
$kendo-fab-active-shadowNullnullnull
Description
The shadow of the active FAB.
$kendo-fab-outline-styleStringsolidsolid
Description
The outline style of the FAB.
$kendo-fab-outline-widthNumber3px3px
Description
The outline width of the FAB.
$kendo-fab-item-textColor$kendo-component-text#212529
Description
The base text color of the FAB item.
$kendo-fab-item-bgColor$kendo-component-bg#ffffff
Description
The base background color of the FAB item.
$kendo-fab-item-borderColor$kendo-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-shadowString$kendo-fab-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The base shadow of the FAB item.
$kendo-fab-item-disabled-shadowString$kendo-fab-disabled-shadowvar(--kendo-elevation-5, 0px 8px 16px 0px rgba(0, 0, 0, 0.15))
Description
The shadow of the disabled FAB item.
$kendo-fab-item-active-shadowNull$kendo-fab-active-shadownull
Description
The shadow of the active FAB item.
$kendo-fab-item-outline-styleStringsolidsolid
Description
The outline style of the FAB item.
$kendo-fab-item-outline-widthNumber3px3px
Description
The outline width of the FAB item.
$kendo-fab-item-outline-colorColor$kendo-button-bg#e4e7eb
Description
The outline color of the FAB item.

In this article

Not finding the help you need?