New to KendoReactLearn about KendoReact Free.

FloatingActionButtonProps

Represents the props of the KendoReact FloatingActionButton component.

NameTypeDefaultDescription

accessKey?

string

Sets the accessKey of the main button.

jsx
<FloatingActionButton accessKey="a" />

align?

FloatingActionButtonAlign

Specifies the alignment of the Floating Action Button within its container. see example.

Centering the Floating Action Button 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 Floating Action Button..
    • 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 Floating Action Button..
    • 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 Floating Action Button. see example.

Normally, the floating button is positioned 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 be used to force a button to overflow the boundaries of its container.

The possible keys are:

  • x—Sets the horizontal offset of the Floating Action Button.
  • y—Sets the vertical offset of the Floating Action Button.
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

Disables the Floating Action Button.

jsx
<FloatingActionButton disabled />

icon?

string

Defines the icon rendered in the Floating Action Button.

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' }]} />

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 Floating Action Button. 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 rendered in the Floating Action Button.

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 Floating Action Button. 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" />
Not finding the help you need?
Contact Support