@material/button

Buttons

The MDC Button component is a spec-aligned button component adhering to the Material Design button requirements. It works without JavaScript with basic functionality for all states. If you initiate the JavaScript object for a button, then it will be enhanced with ripple effects. (Not yet implemented)

Design & API Documentation

• Material Design guidelines: Buttons
• Demo

Installation

npm install --save @material/button

Usage

Flat

<button class="mdc-button">
  Flat button
</button>

Colored

<button class="mdc-button mdc-button--accent">
  Colored button
</button>

Raised

<button class="mdc-button mdc-button--raised">
  Raised button
</button>

Disabled

<button class="mdc-button mdc-button--raised" disabled>
  Raised disabled button
</button>

Adding ripples to buttons

To add the ink ripple effect to a button, attach a ripple instance to the button element.

mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));

You can also do this declaratively when using the material-components-web package.

<button class="mdc-button" data-mdc-auto-init="MDCRipple">
  Flat button
</button>

Buttons are fully aware of ripple styles, so no DOM or CSS changes are required to use them.

Classes

Block

The block class is mdc-button. This defines the top-level button element.

Element

The button component has no inner elements.

Modifier

The provided modifiers are:

Class	Description
mdc-button--dense	Compresses the button text to make it slightly smaller.
mdc-button--raised	Elevates the button and creates a colored background.
mdc-button--compact	Reduces the amount of horizontal padding in the button.
mdc-button--primary	Colors the button with the primary color.
mdc-button--accent	Colors the button with the accent color.