Getting Started with Floating Action Button

NOTE
Before starting the tutorial, make sure that you have installed DevExtreme in your application as described in the Installation section (for JavaScript libraries), the Getting Started article (for ASP.NET MVC 5 Controls), or the Configure a Visual Studio Project article (for ASP.NET Core Controls).

The Floating Action Button (FAB) is the primary action button on a screen that is displayed in front of all screen content. The FAB can perform an action or open a stack of two to five related actions (speed dial)

There should be only one FAB on a screen, but its action(s) can be different for different screens. To find more details on the FAB concept and best practices, refer to the Material Design Guidelines.

In DevExtreme, the FAB is implemented as a container that collects and stores SpeedDialAction components.

From this tutorial, you will learn how to create a single- or multi-action FAB and alter action sets during screen transitions.

NOTE

Code examples in this tutorial use icons from the Ionicons library. If you are going to replicate the examples in your Angular, Vue, or React application, install the ionicons npm package:

npm install ionicons --save

With jQuery, reference the Ionicons stylesheet in the <head> of your page:

HTML
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.6.3/dist/css/ionicons.min.css">

Single Action

A single-action FAB represents the primary action of a screen. According to the guidelines, this action should be constructive, such as, create, share, explore, or edit, as in the following example:

To create a single-action FAB, add one SpeedDialAction to your page and specify its onClick and icon options. Setting other options is not required, but we also specify a hint.

To position the FAB, use the floatingActionButtonConfig.position option in the globalConfig object.

The following code, which configures the example above, illustrates the described techniques:

jQuery
index.js
index.html
index.css
$(function() {
    DevExpress.config({
        floatingActionButtonConfig: {
            position: {
                my: "right bottom",
                at: "right bottom",
                of: "#app-container",
                offset: "-16 -16"
            }
        }
    });

    $("#action-edit").dxSpeedDialAction({
        hint: "Edit",
        icon: "icon ion-md-create",
        onClick: function() {
            showNotification("Edit is clicked");
        }
    });

    function showNotification(message) {
        DevExpress.ui.notify({
            message: message,
            position: {
                my: "left bottom",
                at: "left bottom",
                of: "#app-container",
                offset: "16 -16"
            },
            minWidth: null,
            width: $("#app-container").width() * 0.7
        }, "info", 1000);
    }
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>

        <!-- DevExtreme resources -->
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css">
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.material.blue.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script>

        <!-- Custom icons by Ionicons -->
        <link rel="stylesheet" href="https://unpkg.com/ionicons@4.6.3/dist/css/ionicons.min.css">

        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="app-container">
            <p>View's content</p>
            <div id="action-edit"></div>
        </div>
    </body>
</html>
.dx-fa-button-icon {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}

p {
    text-align: center;
}
Angular
app.component.html
app.component.ts
app.component.css
app.module.ts
angular.json
<div id="app-container">
    <p>View's content</p>
    <dx-speed-dial-action
        hint="Edit"
        icon="icon ion-md-create"
        (onClick)="showNotification('Edit is clicked')">
    </dx-speed-dial-action>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
import config from 'devextreme/core/config';

config({
    floatingActionButtonConfig: {
        position: {
            my: 'right bottom',
            at: 'right bottom',
            of: '#app-container',
            offset: '-16 -16'
        }
    }
});

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    showNotification(message: string) {
        notify({
            message: message,
            position: {
                my: 'left bottom',
                at: 'left bottom',
                of: '#app-container',
                offset: '16 -16'
            },
            minWidth: null,
            width: 320 * 0.7
        }, 'info', 1000);
    }
}
::ng-deep .dx-fa-button-icon {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSpeedDialActionModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSpeedDialActionModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
{
  // ...
  "projects": {
    "ng-app": {
      // ...
      "architect": {
        "build": {
          "options": {
            // ...
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.material.blue.light.css",
              // Custom icons by Ionicons
              "node_modules/ionicons/dist/css/ionicons.css",
              "src/styles.css"
            ],
            // ...
          },
          // ...
        },
        // ...
      }
    },
    // ...
  },
  // ...
}
Vue
App.vue
<template>
    <div id="app-container">
        <p>View's content</p>
        <dx-speed-dial-action
            hint="Edit"
            icon="icon ion-md-create"
            @click="showNotification('Edit is clicked')"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.material.blue.light.css';
// Custom icons by Ionicons
import 'ionicons/dist/css/ionicons.css';

import DxSpeedDialAction from 'devextreme-vue/speed-dial-action';

import notify from 'devextreme/ui/notify';
import config from 'devextreme/core/config';

config({
    floatingActionButtonConfig: {
        position: {
            my: 'right bottom',
            at: 'right bottom',
            of: '#app-container',
            offset: '-16 -16'
        }
    }
});

export default {
    components: {
        DxSpeedDialAction
    },
    methods: {
        showNotification(message) {
            notify({
                message: message,
                position: {
                    my: 'left bottom',
                    at: 'left bottom',
                    of: '#app-container',
                    offset: '16 -16'
                },
                minWidth: null,
                width: 320 * 0.7
            }, 'info', 1000);
        }
    }
}
</script>
<style>
.dx-fa-button-icon {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
    border: 1px solid black;
}
</style>
React
App.js
App.css
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.material.blue.light.css';
// Custom icons by Ionicons
import 'ionicons/dist/css/ionicons.css';
import './App.css';

import SpeedDialAction from 'devextreme-react/speed-dial-action';
import config from 'devextreme/core/config';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    constructor(props) {
        super(props);
        config({
            floatingActionButtonConfig: {
                position: {
                    of: '#app-container',
                    my: 'right bottom',
                    at: 'right bottom',
                    offset: '-16 -16'
                }
            }
        });
    }

    render() {
        return (
            <div id="app-container">
                <p>View's content</p>
                <SpeedDialAction
                    hint="Edit"
                    icon="icon ion-md-create"
                    onClick={() => showNotification('Edit is clicked')}
                />
            </div>
        );
    }
}

function showNotification(message) {
    notify({
        message: message,
        position: {
            my: 'left bottom',
            at: 'left bottom',
            of: '#app-container',
            offset: '16 -16'
        },
        minWidth: null,
        width: 320 * 0.7
    }, 'info', 1000);
}

export default App;
.dx-fa-button-icon {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}

Multiple Actions (Speed Dial)

The FAB can open a menu with several related actions (speed dial).

To create a FAB that opens a speed dial, add up to five SpeedDialAction components to a page, each with an individual icon and onClick event handler. The actions are sorted according to their indexes.

FAB parameters are configured in the floatingActionButtonConfig object. Use it to change the FAB's position, maximum number of actions, icons in the open and close states, and other parameters.

The following code configures the example above and shows how to set the described options:

jQuery
index.js
index.html
index.css
$(function() {
    DevExpress.config({
        floatingActionButtonConfig: {
            icon: "icon ion-md-share",
            position: {
                my: "right bottom",
                at: "right bottom",
                of: "#app-container",
                offset: "-16 -16"
            }
        }
    });

    $("#action-copy").dxSpeedDialAction({
        hint: "Copy to clipboard",
        icon: "icon ion-md-copy",
        onClick: function() {
            showNotification("Copied to clipboard");
        }
    });

    $("#action-mail").dxSpeedDialAction({
        hint: "Send by email",
        icon: "icon ion-md-mail",
        onClick: function() {
            showNotification("Sent by email");
        }
    });

    $("#action-facebook").dxSpeedDialAction({
        hint: "Share on Facebook",
        icon: "icon ion-logo-facebook",
        onClick: function() {
            showNotification("Shared on Facebook");
        }
    });

    function showNotification(message) {
        DevExpress.ui.notify({
            message: message,
            position: {
                my: "left bottom",
                at: "left bottom",
                of: "#app-container",
                offset: "16 -16"
            },
            minWidth: null,
            width: function() {
                return $("#app-container").width() * 0.7;
            }
        }, "info", 1000);
    }
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>

        <!-- DevExtreme resources -->
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css">
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.material.blue.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script>

        <!-- Custom icons by Ionicons -->
        <link rel="stylesheet" href="https://unpkg.com/ionicons@4.6.3/dist/css/ionicons.min.css">

        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="app-container">
            <p>View's content</p>
            <div id="action-mail"></div>
            <div id="action-copy"></div>
            <div id="action-facebook"></div>
        </div>
    </body>
</html>
.dx-fa-button-icon, .dx-fa-button-icon-close {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}

p {
    text-align: center;
}
Angular
app.component.html
app.component.ts
app.component.css
app.module.ts
angular.json
<div id="app-container">
    <p>View's content</p>
    <dx-speed-dial-action
        hint="Copy to clipboard"
        icon="icon ion-md-copy"
        (onClick)="showNotification('Copied to clipboard')">
    </dx-speed-dial-action>
    <dx-speed-dial-action
        hint="Send by email"
        icon="icon ion-md-mail"
        (onClick)="showNotification('Sent by email')">
    </dx-speed-dial-action>
    <dx-speed-dial-action
        hint="Share on Facebook"
        icon="icon ion-logo-facebook"
        (onClick)="showNotification('Shared on Facebook')">
    </dx-speed-dial-action>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
import config from 'devextreme/core/config';

config({
    floatingActionButtonConfig: {
        icon: 'icon ion-md-share',
        position: {
            my: 'right bottom',
            at: 'right bottom',
            of: '#app-container',
            offset: '-16 -16'
        }
    }
});

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    showNotification(message: string) {
        notify({
            message: message,
            position: {
                my: 'left bottom',
                at: 'left bottom',
                of: '#app-container',
                offset: '16 -16'
            },
            minWidth: null,
            width: 320 * 0.7
        }, 'info', 1000);
    }
}
::ng-deep .dx-fa-button-icon, .dx-fa-button-icon-close {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSpeedDialActionModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSpeedDialActionModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
{
  // ...
  "projects": {
    "ng-app": {
      // ...
      "architect": {
        "build": {
          "options": {
            // ...
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.material.blue.light.css",
              // Custom icons by Ionicons
              "node_modules/ionicons/dist/css/ionicons.css",
              "src/styles.css"
            ],
            // ...
          },
          // ...
        },
        // ...
      }
    },
    // ...
  },
  // ...
}
Vue
App.vue
<template>
    <div id="app-container">
        <p>View's content</p>
        <dx-speed-dial-action
            hint="Copy to clipboard"
            icon="ion ion-md-copy"
            @click="showNotification('Copied to clipboard')"
        />
        <dx-speed-dial-action
            hint="Send by email"
            icon="ion ion-md-mail"
            @click="showNotification('Sent by email')"
        />
        <dx-speed-dial-action
            hint="Share on Facebook"
            icon="ion ion-logo-facebook"
            @click="showNotification('Shared on Facebook')"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.material.blue.light.css';
// Custom icons by Ionicons
import 'ionicons/dist/css/ionicons.css';

import DxSpeedDialAction from 'devextreme-vue/speed-dial-action';

import notify from 'devextreme/ui/notify';
import config from 'devextreme/core/config';

config({
    floatingActionButtonConfig: {
        icon: 'icon ion-md-share',
        position: {
            my: 'right bottom',
            at: 'right bottom',
            of: '#app-container',
            offset: '-16 -16'
        }
    }
});

export default {
    components: {
        DxSpeedDialAction
    },
    methods: {
        showNotification(message) {
            notify({
                message: message,
                position: {
                    my: 'left bottom',
                    at: 'left bottom',
                    of: '#app-container',
                    offset: '16 -16'
                },
                minWidth: null,
                width: 320 * 0.7
            }, "info", 1000);
        }
    }
}
</script>
<style>
.dx-fa-button-icon {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
    border: 1px solid black;
}
</style>
React
App.js
App.css
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.material.blue.light.css';
// Custom icons by Ionicons
import 'ionicons/dist/css/ionicons.css';
import './App.css';

import SpeedDialAction from 'devextreme-react/speed-dial-action';
import config from 'devextreme/core/config';
import notify from 'devextreme/ui/notify';

class App extends React.Component {
    constructor(props) {
        super(props);
        config({
            floatingActionButtonConfig: {
                icon: 'icon ion-md-share',
                closeIcon: 'icon ion-md-close',
                position: {
                    of: '#app-container',
                    my: 'right bottom',
                    at: 'right bottom',
                    offset: '-16 -16'
                }
            }
        });
    }

    render() {
        return (
            <div id="app-container">
                <p>View's content</p>
                <SpeedDialAction
                    hint="Copy to clipboard"
                    icon="icon ion-md-copy"
                    onClick={() => showNotification('Copied to clipboard')}
                />
                <SpeedDialAction
                    hint="Send by email"
                    icon="icon ion-md-mail"
                    onClick={() => showNotification('Sent by email')}
                />
                <SpeedDialAction
                    hint="Share on Facebook"
                    icon="icon ion-logo-facebook"
                    onClick={() => showNotification('Shared on Facebook')}
                />
            </div>
        );
    }
}

function showNotification(message) {
    notify({
        message: message,
        position: {
            my: 'left bottom',
            at: 'left bottom',
            of: '#app-container',
            offset: '16 -16'
        },
        minWidth: null,
        width: 320 * 0.7
    }, 'info', 1000);
}

export default App;
.dx-fa-button-icon {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}

Handle Screen Transitions

Different screens use different FABs because a FAB should perform or contain only actions that can be performed on a particular screen. The DevExtreme TabPanel is used to emulate switching between screens.

To implement this behavior in Angular, Vue, and React, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case.

The approach is different if the components have the same URL, or actions are in the same component, or when you configure this behavior in jQuery. Change the visible option of each SpeedDialAction when the screen is switched. Set this option to true if an action can be performed on the current screen. Otherwise, set it to false.

The following code shows the TabPanel configuration and an empty switchSDA function. This function controls the actions' visibility when it is implemented later.

jQuery
index.js
index.html
index.css
$(function() {
    $("#tab-panel").dxTabPanel({
        items: [{
            title: "Edit Tab",
            template: function() {
                return "<p>Edit tab's content</p>";
            }
        }, {
            title: "Share Tab",
            template: function() {
                return "<p>Share tab's content</p>";
            }
        }],
        onSelectionChanged: function(e) {
            switchSDAs(e.addedItems[0].title);
        }
    });

    function switchSDAs(tabTitle) {
        // To be implemented
    }
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script>

        <!-- DevExtreme resources -->
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css">
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.material.blue.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script>

        <!-- Custom icons by Ionicons -->
        <link rel="stylesheet" href="https://unpkg.com/ionicons@4.6.3/dist/css/ionicons.min.css">

        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="app-container">
            <div id="tab-panel"></div>
            <div id="action-edit"></div>
            <div id="action-mail"></div>
            <div id="action-copy"></div>
            <div id="action-facebook"></div>
        </div>
    </body>
</html>
.dx-fa-button-icon, .dx-fa-button-icon-close {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}

.dx-tabpanel .dx-tabs-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.dx-tab {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: center;
}
Angular
app.component.html
app.component.ts
app.component.css
app.module.ts
angular.json
<div id="app-container">
    <dx-tab-panel
        (onSelectionChanged)="switchSDAs($event)">
        <dxi-item title="Edit tab">
            <p>Edit tab's content</p>
        </dxi-item>
        <dxi-item title="Share tab">
            <p>Share tab's content</p>
        </dxi-item>
    </dx-tab-panel>
    <!-- To be implemented -->
</div>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    switchSDAs(e) {
        // To be implemented
        this.currentTab = e.addedItems[0].title; 
    }
}
::ng-deep .dx-fa-button-icon, .dx-fa-button-icon-close {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}

::ng-deep .dx-tabpanel .dx-tabs-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

::ng-deep .dx-tab {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: center;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTabPanelModule, DxSpeedDialActionModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTabPanelModule,
        DxSpeedDialActionModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
{
  // ...
  "projects": {
    "ng-app": {
      // ...
      "architect": {
        "build": {
          "options": {
            // ...
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.material.blue.light.css",
              // Custom icons by Ionicons
              "node_modules/ionicons/dist/css/ionicons.css",
              "src/styles.css"
            ],
            // ...
          },
          // ...
        },
        // ...
      }
    },
    // ...
  },
  // ...
}
Vue
App.vue
<template>
    <div id="app-container">
        <dx-tab-panel
            @selection-changed="switchSDAs">
            <dx-item #default title="Edit tab">
                <p>Edit tab's content</p>
            </dx-item>
            <dx-item #default title="Share tab">
                <p>Share tab's content</p>
            </dx-item>
        </dx-tab-panel>
        <!-- To be implemented -->
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.material.blue.light.css';
// Custom icons by Ionicons
import 'ionicons/dist/css/ionicons.css';

import DxTabPanel, { DxItem } from 'devextreme-vue/tab-panel';

export default {
    components: {
        DxTabPanel,
        DxItem,
    },
    methods: {
        switchSDAs(e) {
            // To be implemented
        }
    }
}
</script>
<style>
.dx-fa-button-icon {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
    border: 1px solid black;
}

.dx-tabpanel .dx-tabs-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.dx-tab {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: center;
}
</style>
React
App.js
App.css
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.material.blue.light.css';
// Custom icons by Ionicons
import 'ionicons/dist/css/ionicons.css';

import './App.css';

import TabPanel, { Item } from 'devextreme-react/tab-panel';

class FAB extends React.Component {
    switchSDAs(e) {
        // To be implemented
    }

    render() {
        return (
            <div id="app-container">
                <TabPanel
                    onSelectionChanged={this.switchSDAs}>
                    <Item title="Edit tab">
                        <p>Edit tab's content</p>
                    </Item>
                    <Item title="Share tab">
                        <p>Share tab's content</p>
                    </Item>
                </TabPanel>
                {/* To be implemented */}
            </div>
        );
    }
}
export default App;
.dx-fa-button-icon {
    text-align: center;
}

p {
    text-align: center;
}

#app-container {
    height: 360px;
    width: 320px;
}

.dx-tabpanel .dx-tabs-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.dx-tab {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: center;
}

The following code adds four SpeedDialActions to the page, but only the "Edit" action is visible at launch. The switchSDA function changes the actions' visibility based on the selected tab:

jQuery
index.js
$(function() {
    // TabPanel is configured here
    // ...

    DevExpress.config({
        floatingActionButtonConfig: {
            icon: "icon ion-md-share",
            position: {
                my: "right bottom",
                at: "right bottom",
                of: "#app-container",
                offset: "-16 -16"
            }
        }
    });

    var editAction = $("#action-edit").dxSpeedDialAction({
        hint: "Edit",
        icon: "icon ion-md-create",
        onClick: function() {
            showNotification("Edit is clicked")
        }
    }).dxSpeedDialAction("instance");

    var copyAction = $("#action-copy").dxSpeedDialAction({
        hint: "Copy to clipboard",
        icon: "icon ion-md-copy",
        visible: false,
        onClick: function() {
            showNotification("Copied to clipboard")
        }
    }).dxSpeedDialAction("instance");

    var mailAction = $("#action-mail").dxSpeedDialAction({
        hint: "Send by email",
        icon: "icon ion-md-mail",
        visible: false,
        onClick: function() {
            showNotification("Sent by email")
        }
    }).dxSpeedDialAction("instance");

    var facebookAction = $("#action-facebook").dxSpeedDialAction({
        hint: "Share on Facebook",
        icon: "icon ion-logo-facebook",
        visible: false,
        onClick: function() {
            showNotification("Shared on Facebook")
        }
    }).dxSpeedDialAction("instance");

    function switchSDAs(tabTitle) {
        if(tabTitle === "Edit Tab") {
            editAction.option("visible", true);
            copyAction.option("visible", false);
            mailAction.option("visible", false);
            facebookAction.option("visible", false);
        }
        if(tabTitle === "Share Tab") {
            editAction.option("visible", false);
            copyAction.option("visible", true);
            mailAction.option("visible", true);
            facebookAction.option("visible", true);
        }
    }
});
Angular
app.component.html
app.component.ts
<div id="app-container">
    <!-- TabPanel is configured here -->
    <!-- ... -->
    <dx-speed-dial-action
        hint="Edit"
        icon="icon ion-md-create"
        [visible]="currentTab === 'Edit tab'"
        (onClick)="showNotification('Edit is clicked')">
    </dx-speed-dial-action>

    <dx-speed-dial-action
        hint="Copy to clipboard"
        icon="icon ion-md-copy"
        [visible]="currentTab === 'Share tab'"
        (onClick)="showNotification('Copied to clipboard')">
    </dx-speed-dial-action>
    <dx-speed-dial-action
        hint="Send by email"
        icon="icon ion-md-mail"
        [visible]="currentTab === 'Share tab'"
        (onClick)="showNotification('Sent by email')">
    </dx-speed-dial-action>
    <dx-speed-dial-action
        hint="Share on Facebook"
        icon="icon ion-logo-facebook"
        [visible]="currentTab === 'Share tab'"
        (onClick)="showNotification('Shared on Facebook')">
    </dx-speed-dial-action>
</div>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';
import config from 'devextreme/core/config';

config({
    floatingActionButtonConfig: {
        icon: 'icon ion-md-share',
        position: {
            my: 'right bottom',
            at: 'right bottom',
            of: '#app-container',
            offset: '-16 -16'
        }
    }
});
// ...
export class AppComponent {
    constructor() {
        this.currentTab = 'Edit tab';
    }
    currentTab: string;
    switchSDAs(e) {
        this.currentTab = e.addedItems[0].title; 
    }
    showNotification(message: string) {
        notify({
            message: message,
            position: {
                my: 'left bottom',
                at: 'left bottom',
                of: '#app-container',
                offset: '16 -16'
            },
            minWidth: null,
            width: 320 * 0.7
        }, 'info', 1000);
    }
}
Vue
App.vue
<template>
    <div id="app-container">
        <!-- TabPanel is configured here -->
        <dx-speed-dial-action
            hint="Edit"
            icon="ion ion-md-create"
            :visible="currentTab === 'Edit tab'"
            @click="showNotification('Edit is clicked')"
        />
        <dx-speed-dial-action
            hint="Copy to clipboard"
            icon="ion ion-md-copy"
            :visible="currentTab === 'Share tab'"
            @click="showNotification('Copied to clipboard')"
        />
        <dx-speed-dial-action
            hint="Send by email"
            icon="ion ion-md-mail"
            :visible="currentTab === 'Share tab'"
            @click="showNotification('Sent by email')"
        />
        <dx-speed-dial-action
            hint="Share on Facebook"
            icon="ion ion-logo-facebook"
            :visible="currentTab === 'Share tab'"
            @click="showNotification('Shared on Facebook')"
        />
    </div>
</template>

<script>
// ...
import DxSpeedDialAction from 'devextreme-vue/speed-dial-action';

import notify from 'devextreme/ui/notify';
import config from 'devextreme/core/config';

config({
    floatingActionButtonConfig: {
        icon: 'icon ion-md-share',
        position: {
            my: 'right bottom',
            at: 'right bottom',
            of: '#app-container',
            offset: '-16 -16'
        }
    }
});

export default {
    components: {
        // ...
        DxSpeedDialAction
    },
    data() {
        return {
            currentTab: 'Edit tab'
        }
    },
    methods: {
        switchSDAs(e) {
            this.currentTab = e.addedItems[0].title;
        },
        showNotification(message) {
            notify({
                message: message,
                position: {
                    my: 'left bottom',
                    at: 'left bottom',
                    of: '#app-container',
                    offset: '16 -16'
                },
                minWidth: null,
                width: 320 * 0.7
            }, "info", 1000);
        }
    }
}
</script>
<style>
/* ... */
</style>
React
App.js
// ...
import SpeedDialAction from 'devextreme-react/speed-dial-action';
import config from 'devextreme/core/config';
import notify from 'devextreme/ui/notify';

class FAB extends React.Component {
    constructor(props) {
        super(props);
        config({
            floatingActionButtonConfig: {
                icon: 'icon ion-md-share',
                position: {
                    my: 'right bottom',
                    at: 'right bottom',
                    of: '#app-container',
                    offset: '-16 -16'
                }
            }
        });
        this.state = {
            currentTab: 'Edit tab'
        }
        this.switchSDAs = this.switchSDAs.bind(this);
    }

    switchSDAs(e) {
        this.setState({
            currentTab: e.addedItems[0].title
        });
    }

    render() {
        return (
            <div id="app-container">
                {/* TabPanel is configured here */}
                <SpeedDialAction
                    hint="Edit"
                    icon="icon ion-md-create"
                    visible={this.state.currentTab === 'Edit tab'}
                    onClick={() => showNotification('Edit is clicked')}
                />
                <SpeedDialAction
                    hint="Copy to clipboard"
                    icon="icon ion-md-copy"
                    visible={this.state.currentTab === 'Share tab'}
                    onClick={() => showNotification('Copied to clipboard')}
                />
                <SpeedDialAction
                    hint="Send by email"
                    icon="icon ion-md-mail"
                    visible={this.state.currentTab === 'Share tab'}
                    onClick={() => showNotification('Sent by email')}
                />
                <SpeedDialAction
                    hint="Share on Facebook"
                    icon="icon ion-logo-facebook"
                    visible={this.state.currentTab === 'Share tab'}
                    onClick={() => showNotification('Shared on Facebook')}
                />
            </div>
        );
    }
}

function showNotification(message) {
    notify({
        message: message,
        position: {
            my: 'left bottom',
            at: 'left bottom',
            of: '#app-container',
            offset: '16 -16'
        },
        minWidth: null,
        width: 320 * 0.7
    }, 'info', 1000);
}
export default App;

For more information on the Floating Action Button's functionality, explore the following resources: