Note

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

Hide code
function NoteExample() {
  return (
    <Note variant="neutral">
      Information that is relevant to the context the user is currently in.
    </Note>
  );
}
function NoteExample() {
  return (
    <Note variant="neutral">
      Information that is relevant to the context the user is currently in.
    </Note>
  );
}
Open in Playground

Component variations

Hide code
function NoteVariationsExample() {
  return (
    <Stack flexDirection="column">
      <Note variant="neutral">Neutral</Note>
      <Note>Primary</Note>
      <Note variant="positive">Positive</Note>
      <Note variant="warning">Warning</Note>
      <Note variant="negative">Negative</Note>
    </Stack>
  );
}
function NoteVariationsExample() {
  return (
    <Stack flexDirection="column">
      <Note variant="neutral">Neutral</Note>
      <Note>Primary</Note>
      <Note variant="positive">Positive</Note>
      <Note variant="warning">Warning</Note>
      <Note variant="negative">Negative</Note>
    </Stack>
  );
}
Open in Playground

Note with title (title)

Hide code
function NoteWithTitleExample() {
  return (
    <Stack flexDirection="column">
      <Note title="Neutral title" variant="neutral">
        Neutral, use as default
      </Note>
      <Note title="Primary title">Primary</Note>
      <Note title="Positive title" variant="positive">
        Positive
      </Note>
      <Note title="Warning title" variant="warning">
        Warning
      </Note>
      <Note title="Negative title" variant="negative">
        Negative
      </Note>
    </Stack>
  );
}
function NoteWithTitleExample() {
  return (
    <Stack flexDirection="column">
      <Note title="Neutral title" variant="neutral">
        Neutral, use as default
      </Note>
      <Note title="Primary title">Primary</Note>
      <Note title="Positive title" variant="positive">
        Positive
      </Note>
      <Note title="Warning title" variant="warning">
        Warning
      </Note>
      <Note title="Negative title" variant="negative">
        Negative
      </Note>
    </Stack>
  );
}
Open in Playground

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"