Forma 36 Logo


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)
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
Warning title
Negative title