Callouts
How to use callout components to highlight important information.
Callouts
Callouts (also known as admonitions) draw attention to important information. Use them for tips, warnings, notes, and more.
Obsidian-Style Syntax
Rhizome supports Obsidian-compatible callout syntax using blockquotes:
> [!note] Optional Title
> Content goes here.
> [!warning] No Title
> Just content, no title needed.
This renders as:
Content goes here.
This callout has no title, just content.
Supported Callout Types
| Syntax | Type | Use Case |
|---|---|---|
[!note] | Note | General information |
[!tip] | Tip | Helpful suggestions |
[!warning] | Warning | Important caveats |
[!danger] | Danger | Critical warnings |
[!info] | Info | Background information |
Type Aliases
Obsidian uses additional type names that map to the core types:
| Syntax | Maps To |
|---|---|
[!error], [!bug] | danger |
[!quote], [!example], [!question] | note |
[!success], [!check] | tip |
[!failure] | danger |
Multi-line Content
Callouts can span multiple lines.
Each line just needs the > prefix.
You can even have multiple paragraphs!
> [!tip] Pro Tip
> Callouts can span multiple lines.
> Each line just needs the `>` prefix.
Foldable Callouts
Add + or - after the type to make callouts collapsible:
+starts expanded (user can collapse)-starts collapsed (user can expand)
This callout starts expanded. Click the arrow to collapse it.
> [!tip]+ Click to Expand
> This content is visible by default.
> [!warning]- Collapsed by Default
> This content is hidden by default.
Use cases for foldable callouts:
| Use Case | Type | State |
|---|---|---|
| FAQ answers | [!note]- | Collapsed |
| Optional deep-dives | [!info]+ | Expanded |
| Spoiler content | [!warning]- | Collapsed |
| Technical appendix | [!note]- | Collapsed |
MDX Component Syntax
For more control, you can use the MDX component syntax directly:
<Callout type="note">
Your content here.
</Callout>
Available Types
Note
For general information and side notes.
Wiki-links are resolved case-insensitively, so the same note can be referenced regardless of capitalization.
Tip
For helpful suggestions and best practices.
Use descriptive note titles. They make wiki-links more readable and help with search.
Warning
For important caveats or things to watch out for.
Private notes (with private: true in frontmatter) are completely excluded from the build output.
Danger
For critical warnings that could cause problems.
Never edit files directly in the src/generated/ directory. They are overwritten on each build.
Info
For additional context or background information.
Callouts support an optional title prop. Without it, only the icon is shown.
Custom Titles
Add a title prop to customize the callout header:
<Callout type="tip" title="Pro Tip">
Custom titles make callouts more specific.
</Callout>
Nested Content
Callouts can contain any Markdown content:
Practical Example: FAQ Section
Foldable callouts are ideal for FAQ-style content. Each question is collapsed by default, keeping the page clean while making answers available on demand:
> [!note]- Question goes here?
> Answer content appears when the user clicks to expand.
>
> You can include multiple paragraphs, **formatting**, and more.
Use Case Examples
Documentation Notes
GET /api/notes/:id - Retrieve a single note by its ID. Returns 404 if not found.
Best Practices
Keep notes focused on a single concept. This makes them easier to link, search, and reuse across different contexts.
Deprecation Warnings
The private frontmatter field is deprecated. Use draft: true instead for work-in-progress notes.
Security Alerts
Never commit .env files to version control. Use .env.example for documentation and keep secrets in your deployment platform's environment settings.
Background Context
The term "wiki" comes from the Hawaiian word for "quick." Ward Cunningham created the first wiki in 1995 as the Portland Pattern Repository.