Buttons allow users to take actions, and make choices, with a single tap.
There are four types of buttons:
Note: Toggle buttons are implemented using the
For more information, see the
npm install @material/button
MDCRipple on the root element. See MDC Ripple for details.
;const buttonRipple = document;
Making buttons accessible
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: 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).
Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content.
Text button example
Text button with icon example
bookmarkText Button plus icon
Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
Outlined button example
Outlined button with icon example
bookmarkOutlined Button plus Icon
Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.
Contained button example
mdc-button--raised is applied for a contained button with elevation,
mdc-button--unelevated is applied for a contained button flush with the surface.
Contained button with icon example
bookmarkContained Button plus Icon
Toggle buttons can be used to select from a group of choices.
There are two types of toggle buttons:
MDC Web currently does not support toggle button groups.
Icons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.
For more details, see 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__label element 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.
Button theming example
The following example shows text, contained, and outlined button types with Material Theming.
Theming with Sass variables
Before importing any MDC Web modules, set the theme colors in your Sass file:
@use "@material/theme" with (;
In this case we also want to customize the label color of the text and outlined
buttons, to fulfill color contrast requirements. Assuming that you've applied
custom-outlined-button classes to your buttons:
Theming with CSS custom properties
If you want to customize the theme for buttons without changing the theme across the app, you can also use CSS custom properties:
For a more information on theming in general, see this page.
||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__label element 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-button__label class may become mandatory for all cases in the future so we recommended to
always include it.
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 for an enabled button.|
||Sets the container fill color to the given color for a disabled button.|
||Sets the icon color to the given color for an enabled button.|
||Sets the icon color to the given color for a disabled button.|
||Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless
||Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless
||Sets density scale for button. Supported density scale values (
||Sets custom height for 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 for an enabled button.|
||Sets the outline color to the given color for a disabled button.|
||Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly.