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.
:::
```mdx
:::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.
:::
```mdx
:::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.
:::
```mdx
:::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.
:::
```mdx
:::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.
:::
```mdx
:::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.
:::
```mdx
:::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](https://zudo-doc.takazudomodular.com/docs/markdown-features/github-alerts) `> [!IMPORTANT]` syntax.
[Dynamic content unavailable in text export]
This is important — use it for key information readers need to achieve their goal.
[Dynamic content unavailable in text export]
Review the migration guide before upgrading.
```mdx
This is important — use it for key information readers need to achieve their goal.
Review the migration guide before upgrading.
```
## 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.
```mdx
Default note with auto-generated title.
Warning with a custom title.
```
The component syntax supports all seven types (`Note`, `Tip`, `Info`, `Warning`, `Danger`, `Caution`, `Important`) and an optional `title` prop.
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | string | Type name (e.g., "Note") | Override the default title text |
## Color Reference
Each admonition type uses a semantic color token for its border and title color:
| Type | Color Token | Typical Color |
|------|------------|---------------|
| Note | accent | Orange |
| Tip | success | Green |
| Info | info | Blue |
| Warning | warning | Yellow |
| Danger | danger | Red |
| Caution | danger | Red |
| Important | accent | Orange |