@material/mwc-button

mwc-button

A Material Components icon implementation using Web Components

Getting started

• The easiest way to try out mwc-button is to use one of these online tools:

  • Runs in all supported browsers: StackBlitz, Glitch

  • Runs in browsers with JavaScript Modules: JSBin, CodePen.

• You can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules.

• When you're ready to use mwc-button in a project, install it via npm. To run the project in the browser, a module-compatible toolctain is required. We recommend installing the Polymer CLI and using its development server as follows.

  • Ensure the webcomponents polyfills are included in your HTML page

    • Install webcomponents polyfills

      npm i @webcomponents/webcomponentsjs

    • Add webcomponents polyfills to your HTML page

      <script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  • Add mwc-button to your project:

    npm i @material/mwc-button

  • Import the mwc-button definition into your HTML page:

    <script type="module" src="@material/mwc-button/index.js"></script>

    Or into your module script:

    import {Button} from "@material/mwc-button"

  • Create an instance of mwc-button in your HTML page, or via any framework that supports rendering Custom Elements:

    <mwc-button>Click Here!</mwc-button>

  • Install the Polymer CLI:

    npm i -g polymer-cli

  • Run the development server and open a browser pointing to its URL:

    polymer serve

  mwc-button is published on npm using JavaScript Modules. This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.

  However, since mwc-button uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server polymer serve automatically handles this transform.

  Tools like WebPack and Rollup can also be used to serve and/or bundle mwc-button.

Supported Browsers

The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.