States
Overlay opacity values
To ensure proper visibility and color contrast accessibility, the opacity value of overlays should be adjusted for every different combination of text on a surface.
Primary color
Secondary color
Background color
Surface color
Error color
States
Text buttons
States
Outlined buttons
States
Contained buttons
States
Icon toggles
States
Flat chips
Choice chips allow selection of a single chip from a set of options.
States
Outlined chips
Choice chips allow selection of a single chip from a set of options.
States
Checkboxes
Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused and pressed states.
States
Radios
Radios can be selected, unselected, or indeterminate. Radios have enabled, disabled, hover, focused and pressed states.
States
Tabs
States
Filled text fields
Filled text fields can display the following states: inactive, activated, focused, hover, error, and disabled.
States
Outlined text fields
Outlined text fields can display the following states: inactive, activated, focused, hover, error, and disabled.