@material/button
Advanced tools
Buttons allow users to take actions, and make choices, with a single tap.
npm install @material/button
<button class="mdc-button">
<span class="mdc-button__label">Button</span>
</button>
NOTE: Examples here use the generic
<button>, but users can also apply themdc-buttonclass to<a>elements.
@import "@material/button/mdc-button";
The button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating MDCRipple on the root element. See MDC Ripple for details.
import {MDCRipple} from '@material/ripple';
const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));
See Importing the JS component for more information on how to import JavaScript.
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 <button> element.
We recommend using Material Icons from Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
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.
<button class="mdc-button">
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
<span class="mdc-button__label">Button</span>
</button>
It's also possible to use an SVG icon:
<button class="mdc-button">
<svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="...">
...
</svg>
<span class="mdc-button__label">Button</span>
</button>
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.
<button class="mdc-button">
<span class="mdc-button__label">Button</span>
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
</button>
NOTE: 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.
<button class="mdc-button" disabled>
<span class="mdc-button__label">Button</span>
</button>
| CSS Class | Description |
|---|---|
mdc-button | Mandatory. Defaults to a text button that is flush with the surface. |
mdc-button--raised | Optional. Styles a contained button that is elevated above the surface. |
mdc-button--unelevated | Optional. Styles a contained button that is flush with the surface. |
mdc-button--outlined | Optional. Styles an outlined button that is flush with the surface. |
mdc-button--dense | Optional. Makes the button text and container slightly smaller. |
mdc-button__label | Recommended.* Indicates the element containing the button's text label. |
mdc-button__icon | Optional. Indicates the element containing the button's icon. |
*NOTE: The
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 themdc-buttonelement. However, themdc-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.
MDC Button uses MDC Theme's primary color by default. Use the following mixins to customize it.
| Mixin | Description |
|---|---|
mdc-button-filled-accessible($container-fill-color) | 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 |
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.
| Mixin | Description |
|---|---|
mdc-button-container-fill-color($color) | Sets the container fill color to the given color. |
mdc-button-icon-color($color) | Sets the icon color to the given color. |
mdc-button-ink-color($color) | Sets the ink color to the given color, and sets the icon color to the given color unless mdc-button-icon-color is also used. |
mdc-button-shape-radius($radius, $rtl-reflexive) | Sets rounded shape to button with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false. |
mdc-button-horizontal-padding($padding) | Sets horizontal padding to the given number. |
mdc-button-outline-color($color) | Sets the outline color to the given color. |
mdc-button-outline-width($width, $padding) | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. $padding is only required in cases where mdc-button-horizontal-padding is also included with a custom value. |
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.
4.0.0 (2019-11-02)
overflow: visible to button. (#4973) (905e84e)checkbox: mdc-checkbox-ink-color mixin now only applies to enabled checkboxes
chips: Chips markup, adapters, foundations, and events have changed.
select: In MDCMenu and MDCMenuSurface, hoistMenuToBody adapter method removed. In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed: getValue, setValue, isMenuOpen, setSelectedIndex, checkValidity, setValid, toggleClassAtIndex. MDCSelectAdapter methods added: hasLabel, getSelectedMenuItem, setSelectedText, isSelectedTextFocused, get/setSelectedTextAttr, getAnchorElement, setMenuAnchorElement, setMenuAnchorCorner, setMenuWrapFocus, set/removeAttributeAtIndex, focusMenuItemAtIndex, getMenuItemValues, getMenuItemCount, getMenuItemCount, getMenuItemAttr, getMenuItemTextAtIndex, add/removeClassAtIndex. MDCSelectFoundation setValue method removed; getDisabled, handleMenuItemAction, getSelectedIndex, get/setRequired, init added.
radio: In Checkbox, Renamed sass variables $mdc-radio-touch-area => $mdc-radio-ripple-size & $mdc-radio-ui-size => $mdc-radio-icon-size to be consistent with checkbox. Also, removed $mdc-radio-ui-pct sass variable.
switch: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
list: New adapter method listItemAtIndexHasClass
list: Renamed mixin mdc-list-item-shape-radius() => mdc-list-single-line-shape-radius()
linear-progress: MDCLinearProgressAdapter adapter has new forceLayout method
text-field: Removed sass variable in notched outline - $mdc-notched-outline-transition-duration.
mdc-fab: This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
NEW
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
radio: Ripple has been moved to a child element. See readme for updates.
slider: remove adapter methods appendTrackMarkers, removeTrackMarkers , setLastTrackMarkersStyleProperty , and add adapter method setTrackMarkers.
button: This changes the structure of the button element by moving the ripple from the outer <button> element to an inner mdc-button__ripple element.
OLD
<button class="mdc-button">
<span class="mdc-button__label">Hello World</span>
</button>
NEW
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Hello World</span>
</button>
chips: MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex
density: Renamed sass mixins & variables in MDC Data Table - mdc-data-table-header-row-height => mdc-data-table-header-cell-height & mdc-data-table-row-height => mdc-data-table-cell-height. Also removed mdc-button--dense variant, use button's density mixin instead.
Note: For older changes, see the changelog archive.
FAQs
The Material Components for the web button component
The npm package @material/button receives a total of 798,088 weekly downloads. As such, @material/button popularity was classified as popular.
We found that @material/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.