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

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

Open in Playground

Component variations

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>
      <Note variant="premium">Premium</Note>
    </Stack>
  );
}

Open in Playground

Note with title (`title`)

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>
      <Note title="Premium title" variant="premium">
        Premium
      </Note>
    </Stack>
  );
}

Open in Playground

Note with custom icon (`icon`)

function WithCustomIconExample() {
  return (
    <Note variant="neutral" icon={<PuzzlePieceIcon />}>
      Information that is relevant to the context the user is currently in.
    </Note>
  );
}

Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
children	ReactNode Children of Note
className	string CSS class to be appended to the root element
closeButtonAriaLabel	string Aria label for the close button	'Dismiss'
icon	ReactElement<unknown, string \| JSXElementConstructor<any>> Expects any of the icon components to override the default Note variant icon
onClose	MouseEventHandler<HTMLButtonElement> Callback for handling closing
testId	string A [data-test-id] attribute used for testing purposes
title	string number bigint false true ReactElement<unknown, string \| JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal Promise<AwaitedReactNode> Sets title in the Note
variant	"negative" "positive" "primary" "warning" "neutral" "premium" Determines style variation of Note component
withCloseButton	false true Defines if the close button should be rendered	false

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"

Import

Examples

Basic usage

Component variations

Note with title (title)

Note with custom icon (icon)

Props (API reference)

Name

Type

Default

Content guidelines

Help improve this page

Note with title (`title`)

Note with custom icon (`icon`)