Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Angular? Start a free 30-day trial

FloatingActionButtonComponent

Represents the Kendo UI FloatingActionButton component for Angular. Used to specify the primary or the most common action in an application.

Selector

kendo-floatingactionbutton

Inputs

NameTypeDefaultDescription

buttonClass

any

The CSS classes that will be rendered on the main button. Supports the type of values that are supported by ngClass.

dialClass

any

The CSS classes that will be rendered on the dial items ul element. Supports the type of values that are supported by ngClass.

dialItemAnimation

boolean | DialItemAnimation

Specifies the animation settings of the FloatingActionButton dial items. (see example).

The possible values are:

  • Boolean
  • DialItemAnimation
    • durationSpecifies the animation duration in milliseconds for each dial item. Defaults to 180ms.
    • gapSpecifies the animation duration gap in milliseconds after each dial item is animated. Defaults to 90ms.

dialItems

any[]

Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.

icon

string

Defines the name of an existing icon in a Kendo UI theme. If provided, the icon will be rendered inside the FloatingActionButton by a span.k-icon element.

iconClass

string

Defines a CSS class or multiple classes separated by spaces which are applied to a span element. Allows the usage of custom icons, rendered inside the FloatingActionButton by a span element.

positionMode

FabPositionMode

Specifies the positionMode of the FloatingActionButton (see example).

  • The possible values are:
  • absolutePositions the FloatingActionButton absolutely to its first positioned parent element.
  • fixed (Default)Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.

tabIndex

number

Specifies the tabIndex of the FloatingActionButton.

text

string

Specifies the text content of the FloatingActionButton.

align

FabAlign

Specifies the horizontal and vertical alignment of the FloatingActionButton (see example).

The possible values are:

  • { horizontal: 'start'|'center'|'end', vertical: 'top'|'middle'|'bottom' }

The default value is:

  • { horizontal: 'end', vertical: 'bottom' }

disabled

boolean

Specifies whether the FloatingActionButton is disabled.

offset

FabOffset

Specifies the horizontal and vertical offset position of the FloatingActionButton (see example).

  • The default value is:
  • { x: '16px', y: '16px' }

rounded

ButtonRounded

The rounded property specifies the border radius of the FloatingActionButton.

The possible values are:

  • small
  • medium
  • large
  • full (default)
  • none

size

ButtonSize

Specifies the size of the FloatingActionButton (see example).

The possible values are:

  • small
  • medium (Default)
  • large
  • none

themeColor

ButtonThemeColor

Specifies the theme color of the FloatingActionButton (see example). The theme color will be applied as background color of the component.

The possible values are:

  • primary (Default)Applies coloring based on the primary theme color.
  • secondaryApplies coloring based on the secondary theme color.
  • tertiary Applies coloring based on the tertiary theme color.
  • infoApplies 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.
  • none Removes the built in theme color.

Fields

NameTypeDefaultDescription

isOpen

boolean

Indicates whether the FloatingActionButton is currently open.

Events

NameTypeDescription

close

EventEmitter<PreventableEvent>

Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open (more information and example).

dialItemClick

EventEmitter<DialItemClickEvent>

Fires each time a dial item is clicked.

blur

EventEmitter<any>

Fires each time the FloatingActionButton gets blurred.

focus

EventEmitter<any>

Fires each time the FloatingActionButton gets focused.

open

EventEmitter<PreventableEvent>

Fires each time the popup is about to open. This event is preventable. If you cancel the event, the popup will remain closed (more information and example).

Methods

blur

Blurs the FloatingActionButton.

focus

Focuses the FloatingActionButton.

toggleDial

Toggles the visibility of the FloatingActionButton dial items popup.

If you use the toggleDial method to open or close the dial items, the open and close events do not fire (more information and examples).

Parameters

open?

boolean

The state of dial items popup.

In this article

Not finding the help you need?