Callout
Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
For isolated previews, theme switching, and sandbox editing, open the Callout playground on holydocs.com .
When to use
Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
Note
Neutral informational callout.
This is a note callout with important context.
mdx<Note>This is a note callout with important context.</Note>
Tip
Helpful suggestion or best practice.
Pro tip: you can chain multiple flags together for faster iteration.
mdx<Tip>Pro tip: you can chain multiple flags together for faster iteration.</Tip>
Warning
Warns the reader about potential issues.
Removing this setting will permanently delete all cached data.
mdx<Warning>Removing this setting will permanently delete all cached data.</Warning>
Info
General informational message.
This feature is available on all paid plans.
mdx<Info>This feature is available on all paid plans.</Info>
Check
Confirms a successful state or outcome.
Your API key has been verified and is ready to use.
mdx<Check>Your API key has been verified and is ready to use.</Check>
Caution
Highlights a situation that requires extra care.
Exceeding rate limits will result in a temporary suspension of your access.
mdx<Caution>Exceeding rate limits will result in a temporary suspension of your access.</Caution>
Danger
Critical warning about destructive or irreversible actions.
This action will permanently delete your project and all associated data. This cannot be undone.
mdx<Danger>This action will permanently delete your project and all associated data. This cannot be undone.</Danger>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | note | Visual style and semantic intent of the callout. |
title | string | -- | Optional title displayed above the callout body. |
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<Note>This is a note callout with important context.</Note>
Tips
- Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
- Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
- Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.
Related Components
More
- Interactive playground: Callout on holydocs.com
- Component library index: /components