Note

1. Import relevant components from @primer/doctocat-nextjs:

import {Note} from '@primer/doctocat-nextjs'

2. Use the components in your Markdown file, but ensure that you wrap the component in a div with the custom-component class. This will ensure that article formatting isn’t applied to the custom component.

<Note>Example of a note</Note>

Will render:

Variants

Use the variant option to change the style of the note. The default variant is info.

<Stack direction="vertical">
  <Note variant="info">Example of an info note</Note>
  <Note variant="warning">Example of a warning note</Note>
</Stack>

Will render: