- Used to provide users with low priority, at-a-glance feedback after the outcome of an action.
|Message||Low priority||Optional: Messages disappear automatically|
|Alert||Prominent, medium priority||Optional: Alerts remain until dismissed by the user, or if the state that caused the alert is resolved|
|Modal||Highest priority||Required: Modals block app usage until the user performs a action or exits the dialog (if available)|
- The feedback is non disruptive.
- Displaying short form information messages, success messages, non-critical errors, or non-critical warnings.
- Error messages block the user or the errors are persistant.
- An action is required.
- The feedback message is longer than roughly 3 words.
- Do not include action buttons within message.
- Try to not go over 3 words.
- Use sentence case.
- Never use all caps, bold or italics.
- Write in a concise and affirmative way.
- Utilize the noun + verb pattern unless more description is needed to describe the outcome.
- Do not use adverbs or adjectives eg.
Selectedlocations enabled successfully.
- Use plural nouns when the message reflects multiple items, otherwise use singular.
- Because task-generated messages are sent in response to user action, it isn’t necessary to give users extensive background information.
|Changes saved.||Changes saved successfully.|
|File exported.||File exported successfully.|
|Updates canceled.||Updates canceled successfully.|
|Location ID saved.||Location ID saved successfully.|
|Locations enabled.||Selected locations enabled successfully.|
- Appear at the top (below header) in the centre of the page when feedback is needed.
- Do not appear over top of other content/actionable components.
- Stay visible for 4 seconds.
- Can be stacked if more feedback is required sequentially.
- Keep consistent location.
- Icon should have alt-text identifying what type of message it is.
- Colour contrast should meet AA standards.
Use for general informational messages.
Example text: Store transfer notification.
Use to indicate that a task or process has completed successfully.
Example text: Product updated.
Use to indicate something has gone wrong but only if it is of low priority.
Example text: Internet disconnected.
Use to notify the user that something will effect the process negatively, but not cause problems.
Example text: Unstable connection.