"A selected state indicates user selection of options using one of the following input methods: tap, cursor, keyboard, or voice."

Selected State

"Hover states are initiated by the user pausing over an interactive element using a cursor. "

Hover States

Selected States 

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


University of Michigan - Ann Arbor

Arizona State University

"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

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  



Learn Before

Related

Learn After