UI States Collection (Notion)

There are 9 states of ui, of which 5 I consider necessary:

1. Nothing
2. *Loading
3. *Empty
4. *One
5. Some
6. *Overflow/Too Many
7. *Error
8. Correct
9. Done

 

I archived components from Notion and grouped them by states. I also added some states as I went.

 

Empty

empty is not really empty.

empty states can simply explain, or ask user to take certain action.

 

Overflow

ellipsis

 

Error

change in stroke and color, also a hover text to double indicate the error

 

Focus

change in stroke and color

 

Hover

icon appears with hover over text area, and again a hover text

an icon with shaow appears

change in background color

list of action uis appear