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 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)

Note with custom icon (icon)

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

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

icon
ReactElement<any, 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
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

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"