Callout | NookDocs

Usage

Callouts draw attention to important information. Use the generic <Callout> with a type prop, or one of the named variants directly.

Generic syntax

<Callout type="info">
  This is an informational callout.
</Callout>

This is an informational callout.

Named variants

<Info>This is an info callout.</Info>
<Warning>This action requires caution.</Warning>
<Tip>Use Cmd+K to open search.</Tip>
<Danger>This cannot be undone.</Danger>
<Note>General information here.</Note>

This is an info callout.

This action requires caution.

Use Cmd+K to open search.

This cannot be undone.

General information here.

Types

Each variant comes with its own color and default icon. The color maps to a theme token, so dark/light modes and tenant custom themes adapt automatically.

Type	Component	Default icon	Use case
`info`	`<Info>`	`info`	General information
`note`	`<Note>`	`info`	Side notes, clarifications
`tip`	`<Tip>`	`lightbulb`	Helpful suggestions, best practices
`warning`	`<Warning>`	`alert-triangle`	Caution or important gotchas
`danger`	`<Danger>`	`alert-circle`	Critical warnings, destructive actions

Custom icon

Override the default variant icon with any Lucide icon name or emoji:

<Tip icon="sparkles">
  This is a tip with a custom sparkles icon.
</Tip>

<Callout type="info" icon="rocket">
  Launch mode activated.
</Callout>

<Note icon="💡">
  Emojis work too — anything that is not a Lucide name is rendered as text.
</Note>

This is a tip with a custom sparkles icon instead of the default lightbulb.

Launch mode activated — custom rocket icon overrides the default info icon.

Emojis work too — anything that is not a registered Lucide name is rendered as text.

Title

Add a bold title above the content for extra emphasis:

<Warning title="Breaking change">
  API v1 will be deprecated on 2026-06-01. Migrate to v2.
</Warning>

Breaking change

API v1 will be deprecated on 2026-06-01. Migrate to v2.

Custom color

Override the variant color with a hex code:

<Callout icon="key" color="#FFC107">
  Your API key is in the dashboard settings.
</Callout>

Your API key is in the dashboard settings.

Props

Prop	Type	Required	Description
`type`	`"note" \| "info" \| "tip" \| "warning" \| "danger"`	No (default `note`)	Callout variant — only on generic `<Callout>`
`title`	`string`	No	Bold title rendered above the content
`icon`	`string`	No	Override the default icon (Lucide, Tabler, Font Awesome, or emoji)
`iconType`	`string`	No	FA icon style (solid, brands, etc.)
`color`	`string`	No	Custom color override (hex). Overrides variant border and background tint