Note
The Note component highlights important content such as tips, alerts, or extra context.
Default
Default note style with a transparent background and optional icon.
Default transparent note
<Note>Default transparent note</Note>Filled
An alternative default style with a light gray background.
Default filled note
<Note filled>Default filled note</Note>Sizes
The Note component supports small, medium, and large sizes.
Small note
Medium note
Large note
<Note size="sm">Small note</Note><Note size="md">Medium note</Note><Note size="lg">Large note</Note>Action
The Note component can include an action button aligned to the right.
This is a note with an action button.
<Note action={(buttonClass) => <button className={buttonClass}>Dismiss</button>}>This is a note with an action button.</Note>Variants
Success
Success note example.
Success note with a link and a button.
<Note variant="success">Success note example.</Note><Note variant="success" action={(buttonClass) => <button className={buttonClass}>Publish</button>}>Success note with <a href="#">a link</a> and a button.</Note>Error
Error note example.
Error note with a link and a button.
<Note variant="error">Error note example.</Note><Note variant="error" action={(buttonClass) => <button className={buttonClass}>Retry</button>}>Error note with <a href="#">a link</a> and a button.</Note>Warning
Warning note example.
Warning note with a link and a button.
<Note variant="warning">Warning note example.</Note><Note variant="warning" action={(buttonClass) => <button className={buttonClass}>Review</button>}>Warning note with <a href="#">a link</a> and a button.</Note>Highlight
Highlight note example sans icon.
Highlight note with a link and a button.
<Note variant="highlight" showIcon={false}>Highlight note example sans icon.</Note><Note variant="highlight" action={(buttonClass) => <button className={buttonClass}>View demo</button>}>Highlight note with <a href="#">a link</a> and a button.</Note>