@contentful/f36-note

---

title: 'Note' slug: /components/note/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/note' storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-note--default' typescript: ./src/Note.tsx

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 Notification, which appear as feedback after a user has performed an action.

Import

import { Note } from '@contentful/f36-components';
// or
import { Note } from '@contentful/f36-note';

Examples

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

Basic usage

Component variations

Note with title (title)

Props (API reference)

Content guidelines

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