color is not part of the official Material You. Colors of tonal buttons are not controlled by color attribute.
Documentations
Table of Contents
Button
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
- Dialogs
- Modal windows
- Forms
- Cards
- Toolbars
Interactive Demo
Types
Usage
Buttons have label text that describes the action that will occur if a user taps a button.
Icon
An icon may optionally be added to a button to help communicate the button's action and help draw attention.
Accessibility
Add an aria-label attribute to buttons whose labels need a more descriptive label.
Floating action button (FAB)
Types
Extended FAB
Usage
FABs should have an icon, such as a font md-icon, an svg, or an img.
Lowered
FABs can be set to a lower elevation with the lowered attribute.
Colors
FAB colors may be changed with the color attribute. It can be set to "surface" (default), "primary", "secondary", or "tertiary".
Sizes
FABs may be small, medium (default), or large by setting the size attribute.
Accessibility
Icon-only FABs must include an aria-label that describes its action. Otherwise if aria-label is not provided, the FAB will default to announcing its visible contents.
Extended FABs use their label for accessibility. Add an aria-label for additional context if needed. By supplying the label attribute, the extended FAB will make sure that the icon is not announced.
Icon Button
Types
Usage
Use icon buttons to display actions in a compact layout. Icon buttons can represent opening actions such as opening an overflow menu or search, or represent binary actions that can be toggled on and off, such as favorite or bookmark.
Icon buttons can be grouped together or they can stand alone.
Toggle
Links
Currently have no native solution.
Accessibility
Toggle
Add aria-label attribute to each icon in toggle buttons.
Toolbar
Toolbars display frequently used actions relevant to the current page or context and group controls into a compact surface.
Types
Floating
Vertical (for Floating Only)
With FAB
Menu
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Checkbox
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
Interactive Demo
Usage
Checkboxes may be standalone, pre-checked, or indeterminate.
Label
Associate a label with a checkbox using the <label> element.
Accessibility
Add an aria-label attribute to checkboxes without labels or checkboxes whose labels need to be more descriptive.
Note: checkboxes are not automatically labelled by <label> elements and always need an aria-label.
Ripple
Ripples are state layers used to communicate the status of a component or interactive element.
A state layer is a semi-transparent covering on an element that indicates its state. A layer can be applied to an entire element or in a circular shape.
Interactive Demo
Usage
Ripples display on press pointer interactions. They may be attached to a control in one of three ways.
- Attached to the parent element
- Attached to a referenced element
- Attached imperatively
Ripples must be placed within a position: relative container.
Accessibility
Ripples are visual components and do not have assistive technology requirements.
Switch
Switches are the preferred way to adjust settings. They're used to control binary options – think On/Off or True/False.
Interactive Demo
Usage
Switches may be standalone or pre-checked.
Icons
Icons can be used to visually emphasize the switch's selected state. Switches can choose to display both icons or only selected icons.
Label
Associate a label with a checkbox using the <label> element.
Accessibility
Add an aria-label attribute to switches without labels or switches whose labels need to be more descriptive.
Note: switches are not automatically labelled by <label> elements and always need an aria-label.
Tooltip
Undone yet.
Select
Selects allow users to choose one or more items from a list of values.
Interactive Demo
About
You can check the source code at the GitHub repository.
This is currently experimental only. Although most of the components are fully tested, you shouldn't use this in production environment.
As this project is not production-ready nor the style systems exist, we have not provided CSS variables generator yet, either.
As this project does not use native elements like button, input[type="checkbox"] or select for better customizations and fewer 2-way attribute bindings, it also brings a problem of unable to perform native form events, but you are still able to do the same things with custom events and Element.attachInternals().
You can also check Elix for using native elements inside web components, or if you like Material You design guidelines and you don't mind using Lit, try Material Web by Google.