When pressed, the Material Design component can display three to six related actions in the form of a speed dial.
npm i --save @nativescript-community/ui-material-speeddial
  • Version: 5.2.19
  • GitHub:
  • Downloads:
    • Last Day:   35
    • Last Week:  329
    • Last Month: 892

NativeScript Material Speed dial

Material Design's Speed dial component for NativeScript.

npm npm


  1. Installation
  2. Changelog
  3. FAQ
  4. Usage


:warning: Warning :warning:

From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

ns plugin add @nativescript-community/ui-material-speeddial

Be sure to run a new build after adding plugins to avoid any issues.




NativeScript + Vue

import Vue from 'nativescript-vue';
import speeddialPlugin from '@nativescript-community/ui-material-speeddial/vue';

<MDSpeedDial buttonFontSize="26" text="mdi-one-up"  buttonClass="mdi" buttonBackgroundColor="yellow" @tap="onTap">
<MDSpeedDialItem icon="res://ic_action_add" title="test1" backgroundColor="red" @tap="onTap"/>
<MDSpeedDialItem text="mdi-card-account-mail" title="test2" buttonClass="mdi" backgroundColor="green" @tap="onTap"/>
<MDSpeedDialItem backgroundImage="~/images/iu.jpg" backgroundColor="blue" @tap="onTap"/>
<MDSpeedDialItem icon="res://ic_action_add" title="test4" backgroundColor="orange" @tap="onTap"/>