Callout

<Callout
type="tip"
title="Keep examples focused"
description="Show one idea at a time so readers can apply it quickly."
/>

Callout separates important guidance from the normal reading flow. It is best for a practical tip, a prerequisite, a warning, or an error condition that a reader should notice while following an article.

Select the right emphasis

Use note for neutral context, info for helpful facts, tip for a preferred approach, and check for a successful outcome. Reserve warning and danger for situations where ignoring the content has a meaningful consequence.

You can provide a short string with description, or use children when the message needs Markdown, links, or another MDX component. Keep each callout to one focused point.

Tell a complete rollout story

Stack related callouts to turn a dry deployment status into a scannable update. Each treatment gives the reader a useful visual cue without obscuring the timeline.

<div className="rounded-xl border border-foreground/10 bg-muted/30 p-4">
<Callout type="info" title="Migration starts at 09:00 UTC">
  Existing links continue to work while the new pages are generated.
</Callout>
<Callout type="warning" title="Pause edits for ten minutes">
  Content changes made during the final sync will not be included.
</Callout>
<Callout type="check" title="Validation passed">
  The preview is live and the search index has been refreshed.
</Callout>
</div>

Properties