FloatingActionButtonProps

Represents the props of the KendoReact FloatingActionButton component.

Name	Type	Default	Description
accessKey?	string		Sets the accessKey of the main button. jsx <FloatingActionButton accessKey="a" />
align?	FloatingActionButtonAlign		Specifies the alignment of the FloatingActionButton within its container. see example. Centering the FloatingActionButton in both horizontal and vertical dimension is not a typical use case. Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and vertical: "middle" at the same time is not supported. The possible keys are: horizontal — Defines the possible horizontal alignment of the FloatingActionButton. start — Uses the start point of the container. center — Uses the center point of the container. end (Default) — Uses the end point of the container vertical — Defines the possible vertical alignment of the FloatingActionButton. top — Uses the top point of the container. middle — Uses the middle point of the container. bottom (Default) — Uses the bottom point of the container. jsx <FloatingActionButton align="bottom end" />
alignOffset?	FloatingActionButtonAlignOffset		Specifies the horizontal and vertical offset of the FloatingActionButton. see example. Normally, the floating button positions next to the boundaries of its container with a default offset of 16px. Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are not in a corner, can be moved along the container's boundary or towards the center of the container. A negative offset can force a button to overflow the boundaries of its container. The possible keys are: x — Sets the horizontal offset of the FloatingActionButton. y — Sets the vertical offset of the FloatingActionButton. jsx <FloatingActionButton alignOffset={{ horizontal: 10, vertical: 20 }} />
className?	string		Specifies a list of CSS classes that will be added to the Floating Action Button. jsx <FloatingActionButton className="custom-fab" />
dir?	string		Represents the dir HTML attribute for text direction. jsx <FloatingActionButton dir="rtl" />
disabled?	boolean	false	Specifies if the FloatingActionButton is disabled. jsx <FloatingActionButton disabled />
icon?	string		Defines the icon that renders in the FloatingActionButton. jsx <FloatingActionButton icon="k-icon k-i-plus" />
iconClass?	string		Defines a custom CSS class for the icon. jsx <FloatingActionButton iconClass="custom-icon-class" />
id?	string		Sets the id property of the root HTML element. jsx <FloatingActionButton id="fab1" />
item?	React.ComponentType<FloatingActionButtonItemProps>		Overrides the default component responsible for rendering items. jsx <FloatingActionButton item={CustomItemComponent} />
items?	FloatingActionButtonItemProps[]		Defines the collection of items rendered in the Floating Action Button. jsx <FloatingActionButton items={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
modal?	boolean		Enables modal behavior by rendering an overlay under the Floating Action Button. jsx <FloatingActionButton modal />
onBlur?	(event: FloatingActionButtonEvent) => void		Fires when the Floating Action Button is blurred. jsx <FloatingActionButton onBlur={(event) => console.log(event)} />
onClick?	(event: FloatingActionButtonEvent) => void		Fires when the Floating Action Button is clicked. jsx <FloatingActionButton onClick={(event) => console.log(event)} />
onClose?	(event: FloatingActionButtonEvent) => void		Fires when the popup containing the items is closed. jsx <FloatingActionButton onClose={(event) => console.log(event)} />
onFocus?	(event: FloatingActionButtonEvent) => void		Fires when the Floating Action Button is focused. jsx <FloatingActionButton onFocus={(event) => console.log(event)} />
onItemClick?	(event: FloatingActionButtonItemEvent) => void		Fires when a Floating Action Button item is clicked. jsx <FloatingActionButton onItemClick={(event) => console.log(event)} />
onKeyDown?	(event: FloatingActionButtonEvent) => void		Fires when a key is pressed while the Floating Action Button is focused. jsx <FloatingActionButton onKeyDown={(event) => console.log(event)} />
onOpen?	(event: FloatingActionButtonEvent) => void		Fires when the popup which contains the items is opened see example. jsx <FloatingActionButton onOpen={(event) => console.log(event)} />
overlayStyle?	React.CSSProperties		Sets styles for the overlay element when the modal prop is enabled. jsx <FloatingActionButton overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />
popupSettings?	FloatingActionButtonPopupSettings		Configures the popup settings for the Floating Action Button. jsx <FloatingActionButton popupSettings={{ animate: false }} />
positionMode?	FloatingActionButtonPositionMode	'fixed'	Specifies the position mode of the Floating Action Button. see example. It is based on the CSS position rule. The possible values are: 'fixed' (Default) 'absolute' jsx <FloatingActionButton positionMode="absolute" />
rounded?	FloatingActionButtonRounded	full	Configures the rounding of the Floating Action Button. The possible values are: small medium large full null—Does not set a rounded className. jsx <FloatingActionButton rounded="small" />
size?	FloatingActionButtonSize	'medium'	Specifies the size of the FloatingActionButton. see example. The possible values are: small — Applies half of the default padding, e.g. 8px. medium (Default) — Applies the default padding, e.g. 16px. large — Applies one and one half of the default padding, e.g. 24px. null — Does not set a size className. jsx <FloatingActionButton size="large" />
style?	React.CSSProperties		Sets additional CSS styles to the Floating Action Button. jsx <FloatingActionButton style={{ backgroundColor: 'blue' }} />
svgIcon?	SVGIcon		Defines the SVG icon that renders in the FloatingActionButton. jsx import { gearIcon } from '@progress/kendo-svg-icons'; <FloatingActionButton svgIcon={gearIcon} />
tabIndex?	number		Sets the tabIndex of the main button. jsx <FloatingActionButton tabIndex={0} />
text?	string		Specifies the text of the Floating Action Button. jsx <FloatingActionButton text="Click me" />
themeColor?	FloatingActionButtonThemeColor	'primary'	Configures the theme color of the FloatingActionButton. see example. The possible values are: primary (Default)—Applies coloring based on the primary theme color. secondary—Applies coloring based on the secondary theme color. tertiary— Applies coloring based on the tertiary theme color. info—Applies coloring based on the info theme color. success— Applies coloring based on the success theme color. warning— Applies coloring based on the warning theme color. error— Applies coloring based on the error theme color. dark— Applies coloring based on the dark theme color. light— Applies coloring based on the light theme color. inverse— Applies coloring based on the inverse theme color. null—Does not set a theme color className. jsx <FloatingActionButton themeColor="secondary" />