Callouts pull a reader’s eye to something important. They live in the Callout
component, so a post that uses them must be an .mdx file (not .md) and
must import the component at the top:
---
title: My post
description: ...
date: 2026-01-01
---
import Callout from "@components/Callout.astro";
<Callout type="info">Heads up — this is worth knowing.</Callout>The four types
The default callout, labeled Note. Use it for neutral asides and extra context that doesn’t fit the main flow.
An Info callout. Good for tips, definitions, and “by the way” details.
You can put links and inline code
inside it.
A Warning callout. Use it for gotchas and easy-to-miss footguns — “this silently truncates if the input is over 256 chars,” that sort of thing.
An Error callout. Reserve it for things that will break: deprecations, data loss, “do not run this in production.”
Multi-line content
Callouts can hold full blocks, including lists:
Steps to reproduce:
- Open the file.
- Change the flag.
- Watch it fail.