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 supports two tones and two icon styles:

  • successTone: “blue” (default) or “green”
  • successIcon: “check” (default) or “info”
Blue success with checkmark (default).
Blue success with info icon.
Green success with checkmark.
Green success with info icon.

Success note with a link and a button.

<Note variant="success">Blue success with checkmark (default).</Note>
<Note variant="success" successIcon="info">Blue success with info icon.</Note>
<Note variant="success" successTone="green">Green success with checkmark.</Note>
<Note variant="success" successTone="green" successIcon="info">Green success with info icon.</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>

Usage

The Note component can be referenced using the following format:

import Note from "../../components/Note";

Props

  • variant: “default” | “success” | “error” | “warning” | “highlight” — visual intent.
  • size: “sm” | “md” | “lg” — spacing and icon size.
  • filled: boolean — filled style for the default variant.
  • showIcon: boolean — toggle the leading icon.
  • action: node | (buttonClass) => node — renders an action button aligned right; when a function is provided, it receives a pre-styled buttonClass string that harmonises with the variant.
  • successTone: “blue” | “green” — success colour theme (applies when variant=“success”). Default: “blue”.
  • successIcon: “check” | “info” — success icon style (applies when variant=“success”). Default: “check”.
  • className: string — additional classes.