Display an inline message to the user.

`import Note from "@convertkit/design/note"`
<br/><br/>

### Usage

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

#### 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).
<br /><br />

#### 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.
<br /><br />

### Anatomy

<img src="https://embed.filekitcdn.com/e/7481HVVUrNK42UP5dX8eaw/3kE3F1dddwegDvsTp89VEQ" class="border rounded mt-4 mb-2 w-full" style="max-width: 700px" />
<br />

#### 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)**

```jsx
<Note
  title="Collaborate with your team"
  message="To invite one more team member, upgrade to the Creator plan which starts at $29/month. "
  action={{
    label: "Upgrade",
    onClick: () => console.log("Click!")
  }}
/>
```

**Success**

```jsx
<Note
  type="success"
  title="Your broadcast has been sent!"
  message="Share this broadcast on other social platforms..."
  action={{
    label: "Share Broadcast",
    onClick: () => console.log("Click!")
  }}
/>
```

**Warning**
```jsx
<Note
  type="warning"
  title="There are broken links in your email"
  message="Looks like one of your links is not working in your email."
  action={{
    label: "Resolve",
    onClick: () => console.log("Click!")
  }}
/>
```

**Error**

```jsx
<Note
  type="error"
  title="Uh oh, something isn't quite right"
  message="We weren't able to save your page."
  action={{
    label: "Try again",
    onClick: () => console.log("Click!")
  }}
/>
```

#### Icon

**Override type's default icon**

```jsx
<Note
  size="sm"
  message="Your application to recommend this Partner Program is pending."
  icon="hourglass"
/>
```

#### Format

**Large (default)**
```jsx
<Note
  title="Collaborate with your team"
  message="To invite one more team member, upgrade to the Creator plan which starts at $29/month. "
  action={{
    label: "Upgrade",
    onClick: () => console.log("Click!")
  }}
/>
```


**Small**

This size does not support the `title` prop.

```jsx
<Note
  size="sm"
  message="To invite one more team member, upgrade to the Creator plan which starts at $29/month. "
  action={{
    label: "Upgrade",
    href: "https://boringtechnology.club"
  }}
/>
```

The action property is optional.

```jsx
<Note
  size="sm"
  message="To invite one more team member, upgrade to the Creator plan which starts at $29/month. "
/>
```

#### Custom content

```jsx
<Note icon={false}>
  <img src="//media4.giphy.com/media/R8n7YlPHe34dy/giphy.gif" />
</Note>
```
