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. You can enhance the button to have ripple effects by instantiating MDCRipple on the button element. See MDC Ripple and Demo for details.

Design & API Documentation


npm install --save @material/button


Button type

Note: Examples and documents use generic <button>, but users can also apply mdc-button to <a class="mdc-button">Link Button</a> in cases where it is semantically correct.

Text Button

<button class="mdc-button">
  Text button

Raised Button

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

Unelevated Button

<button class="mdc-button mdc-button--unelevated">
  Unelevated button

Button state


Users can add disabled directly to the button element or set the fieldset containing the button to disabled to disable a button. Disabled buttons cannot be interacted with and have no visual interaction effect.

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


MDC Buttons have a default baseline color, but it is also possible to adopt the application’s primary or secondary color by adding the mdc-button--primary or mdc-button--accent modifier.

Note: “Secondary” was previously called “accent” in the Material spec. See mdc-theme for details.

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

Adding ripples to buttons

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


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

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

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



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


The button component has no inner elements.


The provided modifiers are:

Class Description
mdc-button--raised A contained button that is elevated upon the surface.
mdc-button--unelevated A contained button that is flush with the surface.
mdc-button--dense Compresses the button text to make it slightly smaller.
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 secondary color.