This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Note

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

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

Component variations

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"

Props

NameRequiredDefaultTypeDescription
onCloseMouseEventHandler<HTMLButtonElement>Callback for handling closing
titlestringSets title in the Note
variantNoteVariantDetermines style variation of Note component
withCloseButtonfalse
false
true
Defines if the close button should be rendered
childrenReactNodeChildren of Note
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes