Notes draw the users attention to a circumstance relevant to an action they're performing or a screen they're accessing.
- Consider the context of where the note is displayed when selecting the type of note to use
- Don't confuse notes with notifications, which appear as feedback after a user has performed an action
- Use clear and succinct copy
- Ensure note is scannable. Focus on the objective and limit the number of concepts in each sentence
- Use progressive disclosure. Eliminate extra details that can be revealed as the user interacts and requires more information.
- Use active voice, present tense, and consider tone of voice depending on the circumstance
- To add additional context, link out to documentation
- Do not preface the instructions with introductory text, such as "please"
The Note component can be configured in a number of different ways. Learn when to use certain variations with this guide.
Note types (
|Primary||Used to display messages which are purely informational - they have neither positive, negative, or warning connotations|
|Positive||Used to display positive messages|
|Negative||For negative/highly critical messages - for informing of errors|
|Warning||Used for a warning messages|
Note with title (