How to add a warning callout

Use <Warning /> when the reader will hurt themselves or the system if they ignore the message. Merely helpful remarks belong in prose — the callout is a scarcity signal.

Import the component

At the top of your MDX file, after the frontmatter, import from the ~/ alias (which maps to src/):

---
title: ...
description: ...
category: ...
---

import Warning from '~/components/Warning.astro';

Use the default (caution)

The default type is caution — use it for recoverable-but-annoying pitfalls:

<Warning>
  `pnpm install --frozen-lockfile` fails if `pnpm-lock.yaml` is out of date.
  Run a normal `pnpm install` locally first to refresh the lockfile,
  then commit the result.
</Warning>

Renders as:

pnpm install --frozen-lockfile fails if pnpm-lock.yaml is out of date. Run a normal pnpm install locally first to refresh the lockfile, then commit the result.

Use info for neutral heads-ups

For context the reader benefits from but can safely ignore:

<Warning type="info" title="Heads up">
  The dev server rebuilds MDX files on save, but changes to `astro.config.mjs`
  require a restart.
</Warning>

Renders as:

Heads up

The dev server rebuilds MDX files on save, but changes to astro.config.mjs require a restart.

Use danger sparingly

Reserve danger for destructive or irreversible operations:

<Warning type="danger" title="Destructive">
  `pnpm astro build` overwrites `dist/` with no prompt. Commit or stash
  anything you care about before running it.
</Warning>

Renders as:

Destructive

pnpm astro build overwrites dist/ with no prompt. Commit or stash anything you care about before running it.

When not to use it

Do not reach for <Warning> to decorate a tip, a best-practice reminder, or a reassurance (“don’t worry, this is safe”). A page with three warnings stops being readable as a warning at all. If you’re unsure whether the reader will regret ignoring the message, it’s probably prose, not a callout.

See Component reference for prop details and the other available components.