Import
import { Note } from '@contentful/f36-components';// orimport { 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>);}
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>);}
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>);}
Note with custom icon (icon
)
function WithCustomIconExample() {return (<Note variant="neutral" icon={<PuzzleIcon />}>Information that is relevant to the context the user is currently in.</Note>);}
Props (API reference)
Open in StorybookName | 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"