Notes provide context and information about a situation or action.
Information that is relevant to the context the user is currently in.
Table of contents
- Best practices
- Note type
- Note with title
- Writing guidelines
- Use an adequate note type to communicate the right kind of information
- Place the note visually closer to the action or real estate it relates to
- Unlike notifications, notes don't show up as feedback only after a user has performed an action
The Note component can be configured in a number of different ways. Learn when to use certain variations with this guide.
Note type (
|Primary||Used to show information that has neither positive, negative, or warning connotations|
|Positive||Used to display messages with a successful outcome|
|Negative||Used for critical information, such as errors or failure|
|Warning||Used for warning messages, useful to know before an action is taken|
Note with title (
- Use clear and succinct copy
- Ensure the copy is easily scannable. Focus on the objective and limit the number of concepts in each sentence
- Use progressive disclosure. Eliminate 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"