Callout Boxes

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: mdx <Callout tone="info"> This adds a note in the content. </Callout> You can also provide an optional title: mdx <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 - info for general guidance - success for confirmation states - warning for risky steps - danger for breaking changes ## Preview