Buttons allow users to take actions, and make choices, with a single tap.
Design & API Documentation
npm install @material/button
NOTE: Examples here use the generic
<button>, but users can also apply the
MDCRipple on the root element. See MDC Ripple for details.
;const buttonRipple = document;
To style a contained button, add the
mdc-button--raised class to the
<button> element for a contained button with elevation, or the
mdc-button--unelevated class for a contained button flush with the surface.
To style an outlined button, add the class
mdc-button--outlined to the
We recommend using Material Icons from Google Fonts:
However, you can also use SVG, Font Awesome, or any other icon library you wish.
To add an icon, add an element with the
mdc-button__icon class inside the button element and set the attribute
aria-hidden="true". The icon is set to 18px to meet legibility requirements.
It's also possible to use an SVG icon:
Certain icons make more sense to appear after the button's text label rather than before. This can be accomplished by
putting the icon markup after the
mdc-button__labelelement is required in order for the trailing icon to be styled appropriately.
To disable a button, add the
disabled attribute directly to the
<button>, or set the
disabled attribute on the
<fieldset> containing the button.
Disabled buttons cannot be interacted with and have no visual interaction effect.
Material Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your button:
My Accessible Button
Note that the outer
mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
||Mandatory. Defaults to a text button that is flush with the surface.|
||Mandatory. Indicates the element which shows the ripple styling.|
||Optional. Styles a contained button that is elevated above the surface.|
||Optional. Styles a contained button that is flush with the surface.|
||Optional. Styles an outlined button that is flush with the surface.|
||Recommended.* Indicates the element containing the button's text label.|
||Optional. Indicates the element containing the button's icon.|
mdc-button__labelelement is required for buttons with a trailing icon, but it is currently optional for buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist directly within the
mdc-buttonelement. However, the
mdc-button__labelclass may become mandatory for all cases in the future, so it is recommended to always include it to be future-proof.
To customize a button's color and properties, you can use the following mixins.
Basic Sass Mixins
MDC Button uses MDC Theme's
primary color by default. Use the following mixins to customize it.
||Sets the container fill color for a contained (raised or unelevated) button, and updates the button's ink, icon, and ripple colors to meet accessibility standards|
Advanced Sass Mixins
These mixins will override the color of the container, ink, outline or ripple. It is up to you to ensure your button meets accessibility standards.
||Sets the container fill color to the given color.|
||Sets the icon color to the given color.|
||Sets the ink color to the given color, and sets the icon color to the given color unless
||Sets density scale for button. Supported density scale values (
||Sets custom height of button.|
||Sets rounded shape to button with given radius size.
||Sets horizontal padding to the given number.|
||Sets the outline color to the given color.|
||Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly.
Caveat: Edge and CSS Custom Properties
In browsers that fully support CSS custom properties, the above mixins will work if you pass in a MDC Theme property (e.g.
primary) as an argument. However, Edge does not fully support CSS custom properties. If you are using the
mdc-button-container-fill-color mixin, you must pass in an actual color value for support in Edge.