Admonitions

Callout blocks for highlighting important information with seven distinct types.

Admonitions are callout blocks for highlighting important information. All seven types are globally available — no imports needed.

Note

:::note
This is a note — use it for general information and tips.
:::

:::note[Custom Title]
Notes are great for calling out important information readers shouldn't miss.
:::

Tip

:::tip
This is a tip — use it for helpful suggestions and best practices.
:::

:::tip[Pro Tip]
Use keyboard shortcuts to speed up your workflow.
:::

Info

:::info
This is an info block — use it for additional context or background information.
:::

:::info[Did You Know?]
This feature was introduced in version 2.0.
:::

Warning

:::warning
This is a warning — use it to flag potential issues or things to watch out for.
:::

:::warning[Deprecation Notice]
This API will be removed in the next major version. Please migrate to the new API.
:::

Danger

:::danger
This is a danger alert — use it for critical warnings about data loss or breaking changes.
:::

:::danger[Breaking Change]
Running this command will permanently delete all data. This action cannot be undone.
:::

Caution

:::caution
This is a caution — use it for risky steps that need extra care before proceeding.
:::

:::caution[Proceed Carefully]
Back up your data before running this migration.
:::

Important

Important has no :::important directive — use the JSX component syntax below, or the GitHub Alerts > [!IMPORTANT] syntax.

<Important>
This is important — use it for key information readers need to achieve their goal.
</Important>

<Important title="Read First">
Review the migration guide before upgrading.
</Important>

Component Syntax

In addition to the directive syntax shown above, you can use JSX component syntax. This is useful when you need more control or are building custom layouts.

<Note>
Default note with auto-generated title.
</Note>

<Warning title="Be Careful">
Warning with a custom title.
</Warning>

The component syntax supports all seven types (Note, Tip, Info, Warning, Danger, Caution, Important) and an optional title prop.

Props

Color Reference

Each admonition type uses a semantic color token for its border and title color: