Forma 36 Logo

Note

View Note on GitHub | View Note in Storybook

Notes draw the users attention to a circumstance relevant to an action they're performing or a screen they're accessing.

Best practices

  • 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

Copy considerations

  • 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"

Note variations

The Note component can be configured in a number of different ways. Learn when to use certain variations with this guide.

Note types (noteType)

Primary (default)
Positive
Warning
Negative
Note TypeNotes
PrimaryUsed to display messages which are purely informational - they have neither positive, negative, or warning connotations
PositiveUsed to display positive messages
NegativeFor negative/highly critical messages - for informing of errors
WarningUsed for a warning messages

Note with title (title)

Primary title
Primary (default)
Positive title
Positive
Warning title
Warning
Negative title
Negative