Forma 36

Note

StorybookGithub
stable

Notes provide context and information about a situation or action. Notes draw the users attention to a circumstance relevant to an action they're performing or a screen they're accessing. Don't confuse notes with notifications, which appear as feedback after a user has performed an action.

Table of contents

How to use Note

  • 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

Component variations

Give couple of clear examples of the usage of the components, that includes import

Code examples

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

Basic example

Note type (noteType)

Note with title (title)

Content recommendations

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

Accessibility

Missing