Callout

Use Callout for notes, warnings, and destructive or irreversible actions. The default callout uses regular Basecoat alert styling and has no icon. Warning and destructive callouts use variant colors.

Usage

Use the component directly in MDX. ReallySimpleDocs components are available by default, so no import is required.

<Callout title="Good to know">
  Keep normal docs pages as Markdown. Use MDX when you need components.
</Callout>

Set a custom Lucide icon with icon when the message benefits from one:

<Callout icon="sparkles" title="Custom icon">
  Use any Lucide icon name in camelCase or kebab-case.
</Callout>

Options

Prop	Type	Default	Notes
`type`	`"warning"` \| `"destructive"`	`undefined`	Optional severity variant.
`title`	`string`	`"Note"`	Heading displayed in the alert.
`icon`	`string`	`undefined`	Optional Lucide icon name or custom SVG.
`action`	`{ label: string; href: string }`	`undefined`	Optional callout action link.
`class`	`string`	`""`	Extra classes applied to the alert root.

Examples

Neutral

Use a callout when the surrounding paragraph is not enough.

<Callout title="Neutral">
  Use a callout when the surrounding paragraph is not enough.
</Callout>

Custom icon

Add a Lucide icon when it helps explain the message.

<Callout icon="lightbulb" title="Custom icon">
  Add a Lucide icon when it helps explain the message.
</Callout>

Action

Template macros available

This component ships an optional action link for related documentation.

<Callout title="Template macros available" icon="code" action={{ label: "More", href: "#" }}>
  This component ships an optional action link for related documentation.
</Callout>

Warning

Avoid putting app-only imports in reusable documentation examples.

<Callout type="warning" title="Warning">
  Avoid putting app-only imports in reusable documentation examples.
</Callout>

Destructive

This variant is for irreversible actions, security risks, or migration warnings.

<Callout type="destructive" title="Destructive">
  This variant is for irreversible actions, security risks, or migration warnings.
</Callout>