State feedback
There are several ways to provide feedback towards the user and every way or component has it’s own properties. This overview will give you some guidance when dealing with communicating a state towards the user.
What states are there?
There are (normally) 4 states, which have a corresponding icon (appears solid or outlined based on component) and color.
| Neutral | Neutral | Success | Success | Warning | Warning | Error | Error |
| neutral-color | neutral-color | success-color | success-color | warning-color | warning-color | error-color | error-color |
What components (mainly) communicate a state?
| Component | Invasiveness | When to use |
|---|---|---|
| Inline | Low | You can locate the cause of an error down to a form element. |
| Tooltip | Low | You can locate the cause of a state to a specific element in the layout. |
| Infobox | Low | State (information), which should constantly be visible. |
| Notification | Mid | State change with a global impact. Can be shown through “Toast” animation. |
| Popup | High | Critical state change which needs emidiate attention and should block the normal operation. |