Callout

Preview

Usage

Each callout variant is its own directive — the type comes from the name, so the only prop you may pass is title (optional):

:::tip{title="Custom title"}
Callout content goes here.
:::

:::info
This is a general note to convey information to the user.
:::

:::danger
This is a danger alert to notify the user of a critical issue.
:::

:::warning
This callout uses the default title and icon from its type.
:::

:::success
This is a success message to inform the user of successful actions.
:::

GFM alerts

GitHub-style alert blockquotes render as the same callouts, so pages ported from GitHub keep working. The marker must be the first line of the blockquote and the title is the GitHub label:

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

Rendered:

The marker is case-insensitive, and the body keeps full markdown support (inline markup, lists, multiple paragraphs). A blockquote whose marker is not on the first line stays a plain quote. IMPORTANT is alert-only: it keeps GitHub's purple accent and icon, and there is no :::important directive.

Props

The type is determined by the directive name: :::tip, :::info, :::danger, :::warning, :::success. Icons follow the type automatically.