MDX components
Note
Highlight requirements, consequences, and warnings with the Note callout component
Overview
Note is a callout box that sets a message apart from the surrounding text. Use it for information readers must not miss: requirements, consequences, deprecations, and security caveats.
A note takes an optional title and a body. The body can hold ordinary text and inline code. Set the type prop to choose a visual variant so readers can tell at a glance whether a callout is neutral, a success message, a warning, or a danger.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | No | Heading shown at the top of the callout. |
type | "note", "success", "warning", "danger" | No | Visual variant of the callout. |
Variants
| Type | Use it for | Example |
|---|---|---|
note | Neutral context, requirements, and clarifications. | A rate limit or the prerequisites for a task. |
success | Confirmation that a step worked or a state is complete. | "The client is connected." |
warning | Consequences a reader should weigh before continuing, such as breaking changes or deprecations. | Removal of an option in a later version. |
danger | Actions that can cause data loss or expose secrets. | Committing a credential to source control. |
Examples
Use a neutral note for a requirement or limit:
<Note title="Rate limits">
Each API key can send 100 requests per minute.
</Note>Use a success note to confirm an outcome:
<Note title="Done" type="success">
The client is connected.
</Note>Use a warning for a breaking change:
<Note title="Breaking change" type="warning">
Version 2.0 removes the `legacy` option.
</Note>Use a danger note for a security caveat:
<Note title="Secrets" type="danger">
Never commit an API key to source control.
</Note>When to use a note
Place a warning near the step or section it affects, so readers see it before they act.
State the consequence in the note itself. Do not repeat the same sentence in the prose around it.
Keep the number of notes on a page small. Four or more on one page usually means the surrounding prose needs tightening.
Do not use a note for ordinary emphasis. Plain prose or a table is clearer for reference information.
Nesting and placement
Do not place a note inside another note.
Do not place cards inside a note.
Keep the callout body short. A note explains a consequence or requirement; it does not repeat the surrounding prose.
Supported callout names
Only Note renders as a callout. Components named Warning, Tip, Callout, Banner, or Alert do not exist. To show a warning, use the Note component with its type set to warning. For a danger message, set the type to danger.