--- title: Callouts description: Highlight notes, cautions, blockers, and success messages with colored callout panels. --- Use ``, ``, ``, and `` 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 `` 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. ``) or using [GitHub alert syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) in blockquotes. Both render the same styled callout boxes. ```mdx Your API key is shown once after creation. ``` ## Choosing the right callout | Type | Panel title | Use when | | --- | --- | --- | | `` | Information | Context, notes, or optional detail that aids understanding | | `` | Warning | Caution before an action; deprecated or risky behavior | | `` | Error | Failure, blocker, or requirement that prevents progress | | `` | Success | Confirmation that something completed or succeeded | Reserve `` for problems that matter; overusing it dilutes urgency. Prefer `` when the content is helpful but not alarming. ## Info Use `` for neutral context: prerequisites, definitions, or helpful background that supports the main content without implying risk or success. Repository webhooks fire after each push to the default branch. Allow a few seconds for the build to appear in the dashboard. ````mdx Repository webhooks fire after each push to the default branch. Allow a few seconds for the build to appear in the dashboard. ```` ## Warning Use `` for cautions readers should weigh before continuing (irreversible actions, deprecated behavior, or steps that may cause data loss). Deleting a project removes all published pages and cannot be undone. Export your content first if you need a backup. ````mdx Deleting a project removes all published pages and cannot be undone. Export your content first if you need a backup. ```` ## Error Use `` for failures, blockers, or constraints that stop progress (missing configuration, invalid input, or conditions that cause an operation to fail). Builds fail when `docs.json` is missing from the repository root. Add the file and push again. ````mdx Builds fail when `docs.json` is missing from the repository root. Add the file and push again. ```` ## Success Use `` for positive outcomes (completed setup, verified checks, or confirmations that a step worked). Your site is live at `https://acme.docs.page`. Share the URL with your team. ````mdx Your site is live at `https://acme.docs.page`. Share the URL with your team. ```` ## Nesting Callouts work inside other components. Use them within ``, ``, ``, and similar containers when a panel or step needs emphasized detail. If events do not arrive, check the delivery log in your repository settings. Webhook secrets rotate when you reconnect a repository. Update the secret in any external integrations. ````mdx If events do not arrive, check the delivery log in your repository settings. Webhook secrets rotate when you reconnect a repository. Update the secret in any external integrations. ```` ## Behavior | Condition | Result | | --- | --- | | Children only | No custom `title`, `icon`, or styling attributes | | Fixed titles | **Information**, **Warning**, **Error**, and **Success** are set by the component | | Empty children | Renders an empty panel | ## GitHub alerts GitHub-style alerts use blockquote syntax with a type marker on the first line: ```markdown > [!NOTE] > Useful information that users should know. ``` | GitHub alert | Callout | | --- | --- | | `[!NOTE]` | Info | | `[!TIP]` | Success | | `[!IMPORTANT]` | Warning | | `[!WARNING]` | Warning | | `[!CAUTION]` | Error | The alert body supports the same Markdown as callout components, including **bold text**, [links](/components/callouts), lists, and code blocks. ### Note > [!NOTE] > Useful information that users should know, even when skimming content. ```markdown > [!NOTE] > Useful information that users should know, even when skimming content. ``` ### Tip > [!TIP] > Helpful advice for doing things better or more easily. ```markdown > [!TIP] > Helpful advice for doing things better or more easily. ``` ### Important > [!IMPORTANT] > Key information users need to know to achieve their goal. ```markdown > [!IMPORTANT] > Key information users need to know to achieve their goal. ``` ### Warning > [!WARNING] > Urgent info that needs immediate user attention to avoid problems. ```markdown > [!WARNING] > Urgent info that needs immediate user attention to avoid problems. ``` ### Caution > [!CAUTION] > Advises about risks or negative outcomes of certain actions. ```markdown > [!CAUTION] > Advises about risks or negative outcomes of certain actions. ``` ## See also - [Components overview](/components): when to use callouts, tabs, and accordions - [Tabs](/components/tabs): switchable panels that can contain callouts - [Accordion](/components/accordion): collapsible sections that can contain callouts - [Steps](/components/steps): numbered procedures for tutorials and guides