• Docs
  • Components
  • Note

Note

A component used to display different types of messages such as general notes, warnings, or success notifications.

Preview

Props

PropTypeDefaultDescription
titlestringfallback to "type" with UppercaseSets the title of the note.
type"info" "danger" "success" "warning" "tip""info"Determines the visual style of the note.
iconstringfallback icon based on typeOptional Lucide icon name. If empty/undefined, icon automatically follows type.

Output Markdown

mdx
<Note type="tip" title="Tip">
  This is a tip to suggests a helpful.
</Note>
<Note type="info" title="Info">
  This is a general note to convey information to the user.
</Note>
<Note type="danger" title="Danger">
  This is a danger alert to notify the user of a critical issue.
</Note>
<Note type="warning">
  This note uses default title and default icon from its type.
</Note>
<Note type="success" title="Success">
  This is a success message to inform the user of successful actions.
</Note>
Edit this page

Last updated May 21, 2026