Callout Boxes
Use compact callout boxes to highlight information, warnings, confirmations, and breaking changes.
Callouts are useful when writers need to interrupt the reading flow on purpose and make a note impossible to miss.
Use in MDX
Add a Callout block directly inside any .mdx article:
<Callout tone="info">
This adds a note in the content.
</Callout>You can also provide an optional title:
<Callout tone="warning" title="Before you rename routes">
Add redirects for any URLs that already exist in production.
</Callout>The title prop is optional. Use it when the callout needs a stronger label, and leave it out when a short note is enough on its own.
Implementation notes
The component is registered in src/components/docs/mdx-components.ts, so it is already available inside docs articles. If you want to change the styling or tones, edit src/components/docs/Callout.astro and the matching callout styles in src/index.css.
Tones
infofor general guidancesuccessfor confirmation stateswarningfor risky stepsdangerfor breaking changes