Alert
Alert messages are meant to provide contextual feedback about important changes in the interface.
- Incorporate messages into the application when necessary to keep users informed of important changes.
- Messages should use positive rhetoric. Avoid using negatives. (e.g. Use “City is required.” instead of “You didn't enter a city.”)
- Always use active instead of passive voice.
- Be concise. Avoid words that plead, belittle or intimidate (i.e. please, wrong, or else).
- Non-entry of a non-required entry field should never generate an edit message or warning message, nor deny user forward movement.
- If possible, dialog messages must always display in full without any scroll bar.
- Dialog messages will retract only when the user closes the dialog or completes through interaction.
| Name | Description |
|---|---|
| Information | Informational messages are used exclusively to assist the user with directional or explanatory text about a complex or seldom used process |
| Warning | Alert or warning messages should be displayed when there is a potential obstacle in completing a process as intended |
| Error | Error messages convey a critical system problem that requires user and/or technical intervention to correct |
| Success | Success messages should be used to assure user that a system calculation or data submission was completed correctly |
| Name | Description |
|---|---|
| Inline | The notification appears in the up right corner of the screen staying visible for 10 seconds |
| Modal | The notification appears centered in the screen using an overlay that obscures the content below |
Depending on the content that need to be displayed, more detailed descriptions can be added to the alert component as children.