Note
A callout for tips, warnings, and errors.
Status colors
Use a status alias (info, success, warning, error, or neutral) when the message has a status. It sets the color and the icon. Use a brand color for a message with no status, such as a tip.
You need a PostHog project and its project token.
New events appear in the activity feed after ingestion.
PostHog received the first event from your site.
Session replay counts toward your monthly recording quota.
The personal API key gives full access to your account.
Ask PostHog AI to write this query for you.
Without a title
Use a note without a title for a short message of one or two lines. The icon is optional.
Your data source is ready.
This SDK sends events in batches.
Sizes
Use md (the default) in docs and pages. Use sm in dense UI, such as a sidebar or a card. sm uses 13px text and less padding.
Session replay counts toward your monthly quota.
Session replay counts toward your monthly quota.
Without an icon
Omit Note.Icon to show only the title and content.
Retention settings apply to new events.
Check the project settings for the current value.
With an action
Use an action when the note leads to one next step, and use a small button for it. The action moves below the body in narrow containers.
Custom icons
Pass an icon as the children of Note.Icon to replace the default icon.
Connect your data source.
Your data source is ready.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Choose the component from where the message sits and what the user does with it.
Component Use it for Badge A status or category that the user reads, such as Beta. Chip A thing the user can open or act on, such as a person, a filter, or a selected value. Note Context inside content, such as a tip in a docs page. Banner A notice about the whole page, at the top. One at a time. Toast Brief feedback after an action. - Say the meaning in words, because the icon and the color are decorative.
API
Note is a site component, not a Base UI component. Root, Title, Content, and Action accept div element props. Icon accepts span element props.
Note.Root
| Prop | Type | Default | Description |
|---|---|---|---|
| color | ColorName | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'brand' | 'info' | A brand color, or a status alias for one. Sets the title strip tint, title color, and icon. |
| size | 'sm' | 'md' | 'md' | Sets the padding and text size. |
| children | ReactNode | – | The note parts. |
Note.Icon
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Tone icon | Replaces the default icon. Omit this part to remove the icon. |
Note.Title
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | The visible title. |
Note.Content
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | The prose content. The first and last child have no outer margin, so a list or a code block also fits. |
Note.Action
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | A Button or ButtonLink beside the body in wide containers. |