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

How to use Note

• 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

Code examples

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

Basic example

<Note>
  Information that is relevant to the context the user is currently in.
</Note>
<Note>
  Information that is relevant to the context the user is currently in.
</Note>
Hide source

Component variations

<Stack flexDirection="column">
  <Note>Primary (default)</Note>
  <Note variant="positive">Positive</Note>
  <Note variant="warning">Warning</Note>
  <Note variant="negative">Negative</Note>
</Stack>
<Stack flexDirection="column">
  <Note>Primary (default)</Note>
  <Note variant="positive">Positive</Note>
  <Note variant="warning">Warning</Note>
  <Note variant="negative">Negative</Note>
</Stack>
Hide source

Note with title (title)

<Stack flexDirection="column">
  <Note title="Primary title">Primary (default)</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>
<Stack flexDirection="column">
  <Note title="Primary title">Primary (default)</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>
Hide source

Content guidelines

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

Props

• Name

  children

  Description

  Children of Note

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  onClose

  Description

  Callback for handling closing

  MouseEventHandler<HTMLButtonElement>
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  title

  Description

  Sets title in the Note

  string
• Name

  variant

  Description

  Determines style variation of Note component

  "negative"

  "positive"

  "primary"

  "warning"
• Name

  withCloseButton

  Description

  Defines if the close button should be rendered

  false

  true