Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Provide context relevant to one piece of an interface.

The contextual note is meant to further explain a given task or piece of content. It’s not important enough to warrant an interruption, but should serve as a heads-up worth knowing then and there.

Web
React Native
Android
Apple
Other
critical

We're missing important info. Make sure Billing Info is complete.

<Note
  type="critical"
  size="large"
>
  We're missing important info. Make sure Billing Info is complete.
</Note>

Props

type

oneOf
string

Determines the type of note.

  • information
  • confirmation
  • warning
  • critical

size

oneOf
string

Determines the size of note.

  • small
  • medium
  • large

children

node

The text that appears in the note.

qaId

string

A unique string that appears as a data attribute in the rendered code, serving as a hook for automated tests.

className

string