Material Design Buttons allow users to take actions, and make choices, with a single tap.

Usage no npm install needed!

<script type="module">
  import nativescriptCommunityUiMaterialButton from 'https://cdn.skypack.dev/@nativescript-community/ui-material-button';


NativeScript Material Button

Material Design's Button component for NativeScript.

npm npm


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


: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).

For NativeScript 7.0+

  • tns plugin add @nativescript-community/ui-material-button

For NativeScript 6.x

  • tns plugin add nativescript-material-button

If using tns-core-modules

  • tns plugin add nativescript-material-button@2.5.4

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




Plain NativeScript

IMPORTANT: Make sure you include xmlns:mdb="@nativescript-community/ui-material-button" on the Page element


<Page xmlns:mdb="@nativescript-community/ui-material-button">
    <StackLayout horizontalAlignment="center">
        <mdb:Button text="raised button"/>
        <mdb:Button variant="flat" text="flat button"/>
        <mdb:Button variant="text" text="text button"/>
        <mdb:Button elevation="5" rippleColor="red" text="raised custom button"/>


mdbutton {
    ripple-color: blue;
    elevation: 4;

NativeScript + Angular

import { NativeScriptMaterialButtonModule } from "@nativescript-community/ui-material-button/angular";

    imports: [
<MDButton rippleColor="blue" text="text button"></MDButton>

NativeScript + Vue

import Vue from 'nativescript-vue';
import ButtonPlugin from '@nativescript-community/ui-material-button/vue';

<MDButton rippleColor="blue" text="text button"/>



Inherite from NativeScript Button so it already has all the same attributes.

  • elevation optional

An attribute to set the elevation of the button. This will increase the 'drop-shadow' of the button.

  • variant optional

An attribute to set the variant of the button. Can be flat or text. No value means raised button

  • rippleColor optional

An attribute to set the ripple color of the button.