Usage
States communicate the status of UI elements to the user. Each state should be visually similar and not drastically alter a component, but must have clear affordances that distinguish it from other states and the surrounding layout.
Principles
States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels. When multiple states occur at...
Distinct
States must have clear affordances distinguishing them from one other and the surrounding UI, emphasized according to their priority levels.
Additive
When multiple states occur at once, such as selection and hover, both state indicators should be displayed.
Consistent
States should be applied consistently across components in order to increase usability.
Types of states
An enabled state communicates an interactive component or element. A disabled state communicates a noninteractive component or element. A hover state communicates when a user...
Anatomy
Overlay
An overlay is a semi-transparent covering on an element, indicating state. Overlays provide a systematic approach to visualizing states using opacity. The overlay can be...
An overlay is a semi-transparent covering on an element that indicates its state. Overlays provide a systematic approach to visualizing states by using opacity. An overlay can be applied to an entire element or in a circular shape.
The overlay color matches the color of the text or icon on the element that it’s applied to. If the text or icon changes color during a state change, the overlay should match the end state's color.
Only one state layer is applied at a time. For example, if an element is first focused and then hovered, the hover state layer will be shown only until the hover is complete, then returning to the focus state layer if the element is still focused.
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.
Disabled
Usage
A disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI. Disabled states are displayed at 38% opacity...
A disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI. Disabled states are displayed at 38% opacity of the enabled state.
Disabled states can also indicate they are not interactive through color changes and reduced elevation.
Disabled state inheritance
Components can inherit a disabled state, such as toggle buttons, selection controls, text fields, icons, grid and list items, cards, chips, and buttons.
Disabled states cannot be inherited by: floating action buttons (FABs), bottom and side sheets, dialogs, menus, tooltips, and alerts, or navigational components (such as app bars, tabs, bottom navigation and steppers). If the action represented in the FAB is unavailable, the FAB should not appear in the composition.
Behavior
Disabled components don’t change state when tapped or hovered over. There may be zero, one, or multiple disabled components in a composition.
Disabled components don’t change state when tapped or hovered over.
There may be zero, one, or multiple disabled components in a composition.
Hover
Usage
Hover states are initiated by the user pausing over an interactive element using a cursor. They can be applied to all interactive components, and should...
Hover states are initiated by the user pausing over an interactive element using a cursor. They can be applied to all interactive components, and should be deemphasized to avoid distracting from content.
An overlay signifies a hover state. It can be applied to the entire component, elements within a component, or as a circular shape over part of the component.
Hover inheritance
Hover states can be inherited by the following components: buttons, FABs, toggle buttons, selection controls, grid list items, list items, cards, chips, text fields, and icons.
Interactive elements can inherit a hover state.
Hover states cannot be inherited by: app bars, tabs, bottom navigation, sheets, dialogs, alerts, menus and steppers.
Behavior
Hover states are initiated by the user pausing over an interactive element using a cursor.
Hover states can be combined with focused, activated, selected, or pressed states.
There can only be one hover state at a time in a layout.
Overlay opacity values
The opacity value of the overlay should be adjusted for each different combination of text on surface in order to ensure proper visibility and color...
The opacity value of the overlay should be adjusted for each different combination of text on surface in order to ensure proper visibility and color contrast accessibility. Hover overlays should be at lower opacities to avoid distracting from content.
Focus
Usage
A focused state communicates when a user has highlighted an element using a keyboard or voice. Focus states apply to all interactive components. They should...
A focused state communicates when a user has highlighted an element using a keyboard or voice. Focus states apply to all interactive components.
They should receive high emphasis, as they are not indicated by other visual cues.
An overlay signifies a focus state. It can be applied to an entire component, elements within a component, or as a circular shape covering part of a component.
Focus state inheritance
Components that can inherit focus states include: buttons, FABs, toggle buttons, selection controls, grid list items, list items, cards, chips, text fields, and icons.
Behavior
Focus states are initiated by user keyboard or voice input on an interactive element, until the user completes the audio or keyboard action.
Focus states can be represented in combination with hover, activated, or selected states.
Only one focus state may exist at a time on a screen.
Overlay opacity values
To ensure proper visibility and color contrast accessibility, the overlay’s opacity value should be adjusted for every different combination of text on surface. Focus overlays...
To ensure proper visibility and color contrast accessibility, the overlay’s opacity value should be adjusted for every different combination of text on surface. Focus overlays should be at higher opacities as they are not indicated otherwise by visual cues.
Selected
Usage
A selected state indicates user selection of options using one of the following input methods: tap, cursor, keyboard, or voice. Selected states should receive medium...
A selected state indicates user selection of options using one of the following input methods: tap, cursor, keyboard, or voice. Selected states should receive medium emphasis so they are easily identifiable, but not distracting.
An overlay signifies a selection state. It can be applied to elements within a component or to the entire component.
Selected state inheritance
Components that can inherit selected states include: image list items, list items, chips, cards, data tables, menu items, and pickers.
Components that cannot inherit selected states include: app bars, backdrop, bottom navigation, sheets, buttons, dialogs, dividers, expansion panels, alerts, snackbars, tabs, text fields, or tooltips.
Behavior
Selected states are initiated when users select one or more options. Selected states can be represented in combination with hover, focus, pressed or dragged states....
Selected states are initiated when users select one or more options.
Selected states can be represented in combination with hover, focus, pressed or dragged states.
Multiple selected states may exist at a time in a layout.
Overlay opacity values
To ensure proper visibility and color contrast accessibility, the overlay’s opacity should be adjusted for every different combination of text on surface. Selection overlays should...
To ensure proper visibility and color contrast accessibility, the overlay’s opacity should be adjusted for every different combination of text on surface. Selection overlays should be at medium emphasis so they are easily identifiable, but not distracting.
Activated
Usage
Activated states indicate which item from a set of options is currently being viewed. They are initiated either by default or user choice, using input...
Activated states indicate which item from a set of options is currently being viewed. They are initiated either by default or user choice, using input methods such as a tap, cursor, keyboard, or voice input. This state should be highly emphasized.
Activated states are signified by an overlay, color change, or other visual treatments applied to elements or segments within a component.
Activated state inheritance
An activated state differs from a selected state because it communicates a highlighted destination.
Components that can inherit activation states include: navigation list items, tab items, bottom navigation items, stepper items, choice chips, or toggle buttons.
Components that cannot inherit activation states include: buttons, floating action buttons, selection controls, sliders, app bars, bottom and side sheets, dialogs, or alerts.
Behavior
Activated states are initiated either by default or user choice. Activated states can be represented in combination with hover and focus states. Within a single...
Activated states are initiated either by default or user choice.
Activated states can be represented in combination with hover and focus states.
Within a single set of options, only one activated state may be present at a time.
Overlay opacity values
To ensure proper visibility and color contrast accessibility, the overlay’s opacity should be adjusted for every different combination of text on surface. Activation overlays should...
To ensure proper visibility and color contrast accessibility, the overlay’s opacity should be adjusted for every different combination of text on surface. Activation overlays should be at higher opacities since they are not always user-initiated.
Pressed
Usage
A pressed state communicates a user-initiated tap or click by a cursor, keyboard, or voice input method. This state applies to all interactive components. Pressed...
A pressed state communicates a user-initiated tap or click by a cursor, keyboard, or voice input method. This state applies to all interactive components.
Pressed states trigger a change in composition and should be high-emphasis.
A ripple overlay signifies a pressed state. It can be applied to an entire component or elements within a component, or as a circular shape over part of the component.
Some components, such as buttons or cards, can inherit elevation to signify a pressed state.
Pressed inheritance
Pressed states can be inherited by the following components: buttons, FABs, toggle buttons, selection controls, grid list items, list items, cards, chips, text fields, and icons.
Interactive elements can inherit a pressed state.
Pressed states cannot be inherited by: app bars, tabs, bottom navigation, sheets, dialogs, alerts, menus, and steppers.
Behavior
Pressed states are initiated by user keyboard or voice input on an interactive element. Pressed states can be combined with hovered, focused, activated, or selected...
Pressed states are initiated by user keyboard or voice input on an interactive element.
Pressed states can be combined with hovered, focused, activated, or selected states.
There may only be a single pressed state at a time in a layout.
Overlay opacity values
To ensure proper visibility, an overlay’s opacity should be adjusted for every different combination of text on surface. Pressed overlays should be at higher opacities...
To ensure proper visibility, an overlay’s opacity should be adjusted for every different combination of text on surface. Pressed overlays should be at higher opacities since they trigger a change in layout.
Dragged
Usage
A dragged state occurs when a user presses and moves an element or component. Dragged states should be low emphasis, to avoid distracting users from...
A dragged state occurs when a user presses and moves an element or component. Dragged states should be low emphasis, to avoid distracting users from their task.
An overlay signifies a dragged state. It can be applied to the entire component or to elements within a component.
Some components, such as list items, chips, or cards, can inherit elevation to signify a dragged state.
Dragged inheritance
Dragged states can be inherited by the following components: grid list items, list items, cards, and chips.
Dragged states cannot be inherited by: app bars, buttons, bottom navigation, dialogs, alerts, menus, or steppers.
Behavior
Dragged states are initiated when users touch and hold elements, using an input method such as a tap or click. There may only be a...
Dragged states are initiated when users touch and hold elements, using an input method such as a tap or click.
There may only be a single dragged state at a time within a layout.
Overlay opacity values
To ensure proper visibility, an overlay’s opacity should be adjusted for every different combination of text on surface. Dragged overlays should be at lower opacities...
To ensure proper visibility, an overlay’s opacity should be adjusted for every different combination of text on surface. Dragged overlays should be at lower opacities to avoid distracting from content.