Callouts

Use <Info>, <Warning>, <Error>, and <Success> to emphasize content readers should notice. Each callout renders a colored panel with a fixed title and icon. Put any content (paragraphs, lists, or code blocks) inside the component.

docs.page provides four callout types. There is no generic <Callout> component and no separate Note, Tip, Check, or Danger variants; choose the type that best matches the message.

You can write callouts as MDX components (e.g. <Info>) or using GitHub alert syntax in blockquotes. Both render the same styled callout boxes.

<Info>Your API key is shown once after creation.</Info>

Reserve <Error> for problems that matter; overusing it dilutes urgency. Prefer <Info> when the content is helpful but not alarming.

Use <Info> for neutral context: prerequisites, definitions, or helpful background that supports the main content without implying risk or success.

<Info>
  Repository webhooks fire after each push to the default branch. Allow a few seconds for the build to appear in the dashboard.
</Info>

Use <Warning> for cautions readers should weigh before continuing (irreversible actions, deprecated behavior, or steps that may cause data loss).

<Warning>
  Deleting a project removes all published pages and cannot be undone. Export your content first if you need a backup.
</Warning>

Use <Error> for failures, blockers, or constraints that stop progress (missing configuration, invalid input, or conditions that cause an operation to fail).

<Error>
  Builds fail when `docs.json` is missing from the repository root. Add the file and push again.
</Error>

Use <Success> for positive outcomes (completed setup, verified checks, or confirmations that a step worked).

<Success>
  Your site is live at `https://acme.docs.page`. Share the URL with your team.
</Success>

Callouts work inside other components. Use them within <Tabs>, <Accordion>, <Steps>, and similar containers when a panel or step needs emphasized detail.

<Accordion title="Webhook troubleshooting">
  If events do not arrive, check the delivery log in your repository settings.

  <Warning>
    Webhook secrets rotate when you reconnect a repository. Update the secret in any external integrations.
  </Warning>
</Accordion>

GitHub-style alerts use blockquote syntax with a type marker on the first line:

> [!NOTE]
> Useful information that users should know.

The alert body supports the same Markdown as callout components, including bold text, links, lists, and code blocks.

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

• Components overview: when to use callouts, tabs, and accordions
• Tabs: switchable panels that can contain callouts
• Accordion: collapsible sections that can contain callouts
• Steps: numbered procedures for tutorials and guides