Roam Research Docs · Help & user documentation

Callouts

markdown version · view in Roam Research

Callouts are styled Blockquotes with a type-specific icon and color.
Start any block with [[>]] [[!NOTE]] to create one (or > [!NOTE]).
You can also use the /Callout slash command to quickly insert one.
Click the callout's icon to change its type.
Types
- > !NOTE This is a basic note callout
  Notes are great for highlighting general information you want to draw attention to.
- > !INFO Informational callout with an info icon
  Use these for additional context or background details.
- > !SUMMARY A summary or abstract callout
  Perfect for executive summaries, TLDRs, or condensed overviews.
  - Aliases: abstract, tldr
- > !TIP Helpful tip — try using callouts for emphasis!
  Combine callouts with bold, *italic*, and code formatting in both the title and body.
  - Aliases: hint, important
- > !SUCCESS Operation completed successfully
  All 47 tests passed. The deployment to staging is live.
  - Aliases: check, done
- > !QUESTION How do callouts work in Roam?
  The first line after [[!TYPE]] is the title. Add body text on the next line with Shift+Enter.
  - Aliases: help, faq
- > !WARNING Be careful when editing shared pages
  Other users may be viewing or editing at the same time.
  - Aliases: caution, attention
- > !FAILURE Build failed due to missing dependencies
  Run npm install and check that all peer dependencies are satisfied.
  - Aliases: fail, missing
- > !DANGER Do NOT delete this page — critical data
  This page contains production configuration values referenced by multiple systems.
  - Alias: error
- > !BUG Found a rendering issue on mobile viewports
  The sidebar overlaps the main content when screen width is below 768px.
- > !EXAMPLE Here's how you format a callout
  Use [[>]] [[!TYPE]] Title on the first line. Add body text with Shift+Enter.
- > !QUOTE "The best way to predict the future is to invent it."
  — Alan Kay, 1971
  - Alias: cite
Foldable Callouts
- Add + or - after the type (e.g. [[!TIP]]+) to make it foldable. + starts expanded, - starts collapsed. Click the header to toggle.
- > !TIP+ Click to collapse this tip
  This body is visible by default because of the + marker. It hides when you click the header.
- > !WARNING- Hidden by default — click to expand
  This body starts collapsed because of the - marker. Click the header to reveal it.
Headings + Callouts
- Callouts work inside heading blocks. The title scales with the heading size while the body stays regular size.
- > !WARNING Heading callout
  Body text stays regular size.

Custom Types & CSS

Unrecognized types fall back to "note" styling but get a .rm-callout--{type} CSS class for custom styling. Each callout exposes --callout-color and --callout-bg custom properties — override these to restyle any type or define your own.
Turn on the css below to enable the custom types

/* Override an existing callout type's colors */
/* .rm-callout--warning {
  --callout-color: #a371f7;
} */

/* Custom type with emoji icon */
.rm-callout--recipe {
  --callout-color: #f778ba;
}
.rm-callout--recipe .rm-callout__icon::before {
  content: "🍪";
  font-family: initial;
}

/* Custom type with SVG icon from URL (inherits callout color) */
.rm-callout--security {
  --callout-color: #e5534b;
}
.rm-callout--security .rm-callout__icon::before {
  content: "";
}
.rm-callout--security .rm-callout__icon {
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask-image: url("https://unpkg.com/lucide-static@latest/icons/shield-alert.svg");
  mask-image: url("https://unpkg.com/lucide-static@latest/icons/shield-alert.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Override background separately if needed */
/* .rm-callout--recipe {
  --callout-bg: rgba(247, 120, 186, 0.2);
} */

> [!recipe] Grandma's cookies
> [!security] Security alert