note

type
Not required
("info" | "success" | "warning" | "error")
"info"
size
Not required
("sm" | "lg")
"lg"
title
Not required
string
Only available on `lg` size
message
Not required
string
action
Not required
shape
icon
Not required
bool/string
true
Controls if an icon is displayed or not.
className
Not required
string
children
Not required
arrayOf/node

Display an inline message to the user. import Note from "@kit/design/note"

Usage

  • Share non-critical info with users.
  • Give more context on state: Warning, error, success.
  • Upsell or product marketing focused actions.

Do's

  • Place this component alongside the content it's referring to at the same z-level.
  • Keep the messaging concise and limited to 1 action (if any).

Don'ts

  • Place over top of another element. Refer to Toast component for overlaying messaging on top of the UI.
  • Use multiple paragraphs and links.

Anatomy

Note Anatomy

Type

  • This defines what the color scheme will be and provides a default icon.
  • If your note doesn't fit inside of one of the standard status types (success, warning, error) then stick to the default info option.

Title

  • This should be short and to the point. 3-7 words.
  • For upsells, make it catchy! For important notes, use it as the TL;DR.
  • Not available on small notes.

Message

  • Add additional context to your Note.
  • 1-3 sentences.

Action

  • Providing an action will add this button to the note.
  • Actions can be links or buttons, but are always visually the same.

Icon

  • This defines if an icon should be displayed. It defaults to true. To hide the icon or provide custom content, use false
  • To override the default icon used (based on the type prop), you can specify an icon name

Children

  • You can pass children to the Note in rare instances where you need to customize the content more.

<br /><br />

Examples

Type

Info (default)

Success

Warning

Error

Icon

Override type's default icon

Format

Large (default)

Small

This size does not support the title prop.

The action property is optional.

Custom content