Forma 36

Note

StorybookGithub
stable

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

  1. Best practices
  2. Variations
    1. Note type
    2. Note with title
  3. Writing guidelines

Best practices

  • 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

Note variations

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

Note type (noteType)

Primary (default)
Positive
Warning
Negative
Note TypeNotes
PrimaryUsed to show information that has neither positive, negative, or warning connotations
PositiveUsed to display messages with a successful outcome
NegativeUsed for critical information, such as errors or failure
WarningUsed for warning messages, useful to know before an action is taken

Note with title (title)

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

Writing guidelines

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