Overlay Opacity Values

A user interface (UI) state overlay is a semi-transparent color layer applied over a component or element to indicate its current interactive state, such as hover, focus, or press.

UI State Overlays

To show state changes, use an overlay over existing content. Additional visual signifiers can be used to support state changes, including:
- Elevation
- Color
- Iconography
- Messaging

Arizona State University

University of Michigan - Ann Arbor

Google

"States are visual representations used to communicate the status of a component or interactive element."

States of Being 

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."

Principles of States

- Enabled
- Disabled
- Hover
- Focused
- Selected
- Activated
- Pressed
- Dragged
- On
- Off
- Error


Learn Before

Related

Learn After